商品を紹介したい、スタッフのプロフィールを載せたい、料金プランを並べたい。
こうした場面でよく使われるのが「カード」と呼ばれるデザインです。

この記事では、コピペするだけで使えるカードデザインを20個まとめました。

商品紹介、プロフィール、料金プランなど、幅広い用途に対応できるよう、種類を分けて紹介しています。

前回の見出し記事と同じく、HTMLとCSSを分けて掲載しているので、スタイルシートへの追加にもそのまま使えます。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシート（子テーマのstyle.cssなど）に追加します。

続いて、HTMLのコードを、カードを表示したい場所に貼り付けます。画像の部分は、サンプルではダミー画像（グレーの四角）で代用しているので、実際に使う際はimgタグのsrcを、ご自身の画像パスに書き換えてください。
クラス名は「kts-card」から始まる名前で統一しています。

01. シンプル商品カード

画像・タイトル・価格・ボタンをまとめた、もっとも基本の商品カードです。

実際の見た目

HTMLコード

<div class="kts-card01"> <div class="kts-card01-img"></div> <h3 class="kts-card01-title">商品名がここに入ります</h3> <p class="kts-card01-price">¥3,980</p> <button class="kts-card01-btn">詳しく見る</button> </div>

CSSコード

.kts-card01 { width: 260px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card01-img { height: 160px; background: #D8DCE1; } .kts-card01-title { font-size: 16px; margin: 14px 14px 4px; color: #1F2933; } .kts-card01-price { font-size: 18px; font-weight: 700; margin: 0 14px 14px; color: #D97757; } .kts-card01-btn { display: block; width: calc(100% - 28px); margin: 0 14px 14px; padding: 10px; background: #2E6F5E; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }

02. プロフィールカード

丸型のアバターと、名前・肩書きを添えたプロフィール紹介用のカードです。

実際の見た目

HTMLコード

<div class="kts-card02"> <div class="kts-card02-avatar"></div> <h3 class="kts-card02-name">山田 太郎</h3> <p class="kts-card02-role">Webデザイナー</p> <p class="kts-card02-desc">サイトの見た目づくりを担当しています。</p> </div>

CSSコード

.kts-card02 { width: 240px; text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); padding: 24px 18px; font-family: sans-serif; } .kts-card02-avatar { width: 80px; height: 80px; border-radius: 50%; background: #D8DCE1; margin: 0 auto 12px; } .kts-card02-name { font-size: 17px; margin: 0 0 2px; color: #1F2933; } .kts-card02-role { font-size: 13px; color: #3F8CFF; margin: 0 0 10px; } .kts-card02-desc { font-size: 13px; color: #666; margin: 0; }

03. 料金プランカード

プラン名・価格・機能リスト・ボタンをまとめた、料金表でおなじみの形です。

実際の見た目

HTMLコード

<div class="kts-card03"> <h3 class="kts-card03-plan">スタンダード</h3> <p class="kts-card03-price">¥1,980<span>/月</span></p> <ul class="kts-card03-list"> <li>基本機能が使える</li> <li>メールサポート付き</li> <li>容量10GBまで</li> </ul> <button class="kts-card03-btn">このプランで始める</button> </div>

CSSコード

.kts-card03 { width: 260px; background: #fff; border: 2px solid #E4E4E4; border-radius: 12px; padding: 24px 20px; text-align: center; font-family: sans-serif; } .kts-card03-plan { font-size: 16px; color: #1F2933; margin: 0 0 8px; } .kts-card03-price { font-size: 28px; font-weight: 800; color: #2E6F5E; margin: 0 0 16px; } .kts-card03-price span { font-size: 13px; font-weight: 400; color: #8A94A0; } .kts-card03-list { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; font-size: 14px; color: #444; } .kts-card03-list li { padding: 6px 0; border-bottom: 1px solid #F1F3F5; } .kts-card03-btn { width: 100%; padding: 12px; background: #2E6F5E; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }

04. ホバーで浮き上がるカード

カーソルを合わせると、影が広がって少し浮き上がって見えるカードです。

実際の見た目

HTMLコード

<div class="kts-card04"> <div class="kts-card04-img"></div> <h3 class="kts-card04-title">おすすめの記事タイトル</h3> <p class="kts-card04-desc">記事の説明文がここに入ります。</p> </div>

CSSコード

.kts-card04 { width: 260px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: box-shadow 0.25s ease, transform 0.25s ease; font-family: sans-serif; } .kts-card04:hover { box-shadow: 0 14px 26px rgba(0,0,0,0.14); transform: translateY(-6px); } .kts-card04-img { height: 140px; background: #D8DCE1; } .kts-card04-title { font-size: 15px; margin: 14px 14px 6px; color: #1F2933; } .kts-card04-desc { font-size: 13px; color: #666; margin: 0 14px 16px; }

05. 横長カード（画像左・テキスト右）

画像を左、テキストを右に並べた横長タイプです。一覧ページに向いています。

実際の見た目

HTMLコード

<div class="kts-card05"> <div class="kts-card05-img"></div> <div class="kts-card05-body"> <h3 class="kts-card05-title">横長カードのタイトル</h3> <p class="kts-card05-desc">画像とテキストを横に並べた形です。</p> </div> </div>

CSSコード

.kts-card05 { display: flex; width: 420px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card05-img { width: 120px; flex-shrink: 0; background: #D8DCE1; } .kts-card05-body { padding: 16px; } .kts-card05-title { font-size: 15px; margin: 0 0 6px; color: #1F2933; } .kts-card05-desc { font-size: 13px; color: #666; margin: 0; }

06. アイコン付き機能紹介カード

円形の背景にアイコンを乗せた、サービスの特徴紹介向けのカードです。

実際の見た目

HTMLコード

<div class="kts-card06"> <div class="kts-card06-icon" aria-hidden="true">⚡</div> <h3 class="kts-card06-title">スピード対応</h3> <p class="kts-card06-desc">最短即日でご対応いたします。</p> </div>

CSSコード

.kts-card06 { width: 220px; text-align: center; padding: 24px 16px; font-family: sans-serif; } .kts-card06-icon { width: 56px; height: 56px; line-height: 56px; background: #EFF6F3; color: #2E6F5E; border-radius: 50%; margin: 0 auto 14px; font-size: 24px; } .kts-card06-title { font-size: 16px; margin: 0 0 6px; color: #1F2933; } .kts-card06-desc { font-size: 13px; color: #666; margin: 0; }

07. グラデーション背景カード

背景全体にグラデーションを敷いた、目を引くタイプのカードです。

実際の見た目

HTMLコード

<div class="kts-card07"> <h3 class="kts-card07-title">プレミアムプラン</h3> <p class="kts-card07-desc">すべての機能が使い放題になります。</p> <button class="kts-card07-btn">詳細を見る</button> </div>

CSSコード

.kts-card07 { width: 260px; padding: 24px 20px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6C63FF, #3F8CFF); font-family: sans-serif; } .kts-card07-title { font-size: 18px; margin: 0 0 8px; } .kts-card07-desc { font-size: 13px; opacity: 0.9; margin: 0 0 18px; } .kts-card07-btn { padding: 10px 20px; background: #fff; color: #3F5CFF; border: none; border-radius: 6px; font-weight: 700; cursor: pointer; }

08. バッジ付きおすすめカード

「人気No.1」のようなバッジを右上に添えて、注目を集めるカードです。

実際の見た目

HTMLコード

<div class="kts-card08"> <span class="kts-card08-badge">人気No.1</span> <h3 class="kts-card08-plan">ベーシックプラン</h3> <p class="kts-card08-price">¥980<span>/月</span></p> <button class="kts-card08-btn">申し込む</button> </div>

CSSコード

.kts-card08 { position: relative; width: 240px; padding: 24px 20px; background: #fff; border: 2px solid #D97757; border-radius: 12px; text-align: center; font-family: sans-serif; } .kts-card08-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #D97757; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; } .kts-card08-plan { font-size: 16px; margin: 10px 0 6px; color: #1F2933; } .kts-card08-price { font-size: 24px; font-weight: 800; color: #D97757; margin: 0 0 16px; } .kts-card08-price span { font-size: 12px; font-weight: 400; color: #8A94A0; } .kts-card08-btn { width: 100%; padding: 10px; background: #D97757; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }

09. ミニマルボーダーカード

枠線だけのシンプルな作りで、背景に馴染みやすいカードです。

実際の見た目

HTMLコード

<div class="kts-card09"> <h3 class="kts-card09-title">ミニマルカード</h3> <p class="kts-card09-desc">装飾を抑えた、すっきりとした見た目です。</p> </div>

CSSコード

.kts-card09 { width: 240px; padding: 20px; border: 1px solid #D8DCE1; border-radius: 8px; font-family: sans-serif; } .kts-card09-title { font-size: 15px; margin: 0 0 6px; color: #1F2933; } .kts-card09-desc { font-size: 13px; color: #666; margin: 0; }

10. 画像オーバーレイテキストカード

写真の上にタイトルを重ねて表示する、雑誌風のカードです。

実際の見た目

HTMLコード

<div class="kts-card10"> <div class="kts-card10-overlay"> <h3 class="kts-card10-title">特集タイトル</h3> </div> </div>

CSSコード

.kts-card10 { position: relative; width: 260px; height: 160px; background: #8A94A0; border-radius: 10px; overflow: hidden; } .kts-card10-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%); display: flex; align-items: flex-end; padding: 14px; } .kts-card10-title { color: #fff; font-size: 17px; margin: 0; font-family: sans-serif; }

11. イベント日程カード

日付を大きく表示した、イベント告知に使いやすいカードです。

実際の見た目

HTMLコード

<div class="kts-card11"> <div class="kts-card11-date"><span class="day">15</span><span class="month">OCT</span></div> <div class="kts-card11-body"> <h3 class="kts-card11-title">秋の感謝祭</h3> <p class="kts-card11-desc">10:00〜17:00 会場：本店</p> </div> </div>

CSSコード

.kts-card11 { display: flex; width: 300px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card11-date { width: 70px; flex-shrink: 0; background: #1F2933; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .kts-card11-date .day { font-size: 26px; font-weight: 800; } .kts-card11-date .month { font-size: 12px; letter-spacing: 0.1em; } .kts-card11-body { padding: 14px 16px; } .kts-card11-title { font-size: 15px; margin: 0 0 6px; color: #1F2933; } .kts-card11-desc { font-size: 13px; color: #666; margin: 0; }

12. 星評価付きレビューカード

星のアイコンで評価を表示する、口コミ紹介向けのカードです。

実際の見た目

HTMLコード

<div class="kts-card12"> <div class="kts-card12-stars" aria-label="評価5段階中4">★★★★<span class="off">★</span></div> <p class="kts-card12-text">「対応がとても丁寧でした。」</p> <p class="kts-card12-name">— 東京都 M様</p> </div>

CSSコード

.kts-card12 { width: 260px; padding: 20px; background: #F9FAFB; border-radius: 10px; font-family: sans-serif; } .kts-card12-stars { color: #FFB020; font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; } .kts-card12-stars .off { color: #D8DCE1; } .kts-card12-text { font-size: 14px; color: #333; margin: 0 0 10px; } .kts-card12-name { font-size: 12px; color: #8A94A0; margin: 0; text-align: right; }

13. ダークテーマのカード

暗い背景に合わせた配色の、ダークモード対応カードです。

実際の見た目

HTMLコード

<div class="kts-card13"> <h3 class="kts-card13-title">ダークテーマカード</h3> <p class="kts-card13-desc">暗い背景でも見やすい配色にしています。</p> </div>

CSSコード

.kts-card13 { width: 260px; padding: 22px; background: #1B1F24; border: 1px solid #2E343B; border-radius: 10px; font-family: sans-serif; } .kts-card13-title { color: #fff; font-size: 16px; margin: 0 0 8px; } .kts-card13-desc { color: #9AA4AE; font-size: 13px; margin: 0; }

14. 円形アイコン背景の特徴カード

見出しの上に円形アイコンを重ねて、特徴を目立たせるカードです。

実際の見た目

HTMLコード

<div class="kts-card14"> <div class="kts-card14-icon" aria-hidden="true">🔧</div> <h3 class="kts-card14-title">かんたん設定</h3> <p class="kts-card14-desc">最短5分で使い始められます。</p> </div>

CSSコード

.kts-card14 { width: 220px; text-align: center; padding: 30px 16px 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); font-family: sans-serif; } .kts-card14-icon { width: 60px; height: 60px; line-height: 60px; background: linear-gradient(135deg, #6C63FF, #3F8CFF); color: #fff; border-radius: 50%; margin: 0 auto 14px; font-size: 26px; } .kts-card14-title { font-size: 16px; margin: 0 0 6px; color: #1F2933; } .kts-card14-desc { font-size: 13px; color: #666; margin: 0; }

15. 達成率バー付きカード

目標に対する進み具合を、バーで示すカードです。

実際の見た目

HTMLコード

<div class="kts-card15"> <h3 class="kts-card15-title">今月の目標</h3> <div class="kts-card15-bar"><div class="kts-card15-fill"></div></div> <p class="kts-card15-percent">達成率 68%</p> </div>

CSSコード

.kts-card15 { width: 260px; padding: 20px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; font-family: sans-serif; } .kts-card15-title { font-size: 15px; margin: 0 0 12px; color: #1F2933; } .kts-card15-bar { background: #EEF1F3; border-radius: 999px; height: 10px; overflow: hidden; } .kts-card15-fill { width: 68%; height: 100%; background: #2E6F5E; } .kts-card15-percent { font-size: 13px; color: #666; margin: 10px 0 0; text-align: right; }

16. タグ付きブログ記事カード

カテゴリーのタグを添えた、ブログの記事一覧向けのカードです。

実際の見た目

HTMLコード

<div class="kts-card16"> <div class="kts-card16-img"></div> <span class="kts-card16-tag">AI活用</span> <h3 class="kts-card16-title">Claudeで議事録を作る方法</h3> </div>

CSSコード

.kts-card16 { width: 260px; background: #fff; border: 1px solid #E4E4E4; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card16-img { height: 140px; background: #D8DCE1; } .kts-card16-tag { display: inline-block; margin: 14px 0 0 14px; background: #EFF6F3; color: #2E6F5E; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .kts-card16-title { font-size: 15px; margin: 8px 14px 16px; color: #1F2933; }

17. ホバーで画像がズームするカード

カーソルを合わせると、内側の画像だけが少し拡大するカードです。

実際の見た目

HTMLコード

<div class="kts-card17"> <div class="kts-card17-imgwrap"><div class="kts-card17-img"></div></div> <h3 class="kts-card17-title">ズームするカード</h3> </div>

CSSコード

.kts-card17 { width: 240px; background: #fff; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card17-imgwrap { overflow: hidden; height: 140px; } .kts-card17-img { width: 100%; height: 100%; background: #D8DCE1; transition: transform 0.35s ease; } .kts-card17:hover .kts-card17-img { transform: scale(1.12); } .kts-card17-title { font-size: 15px; margin: 12px 14px 16px; color: #1F2933; }

18. Before/After比較カード

変化や違いを、左右2つに分けて見せるカードです。

実際の見た目

HTMLコード

<div class="kts-card18"> <div class="kts-card18-col"> <p class="label">Before</p> <div class="kts-card18-img"></div> </div> <div class="kts-card18-col"> <p class="label">After</p> <div class="kts-card18-img"></div> </div> </div>

CSSコード

.kts-card18 { display: flex; gap: 2px; width: 300px; background: #E4E4E4; border-radius: 10px; overflow: hidden; font-family: sans-serif; } .kts-card18-col { flex: 1; background: #fff; text-align: center; padding-bottom: 10px; } .kts-card18-col .label { font-size: 12px; color: #8A94A0; margin: 8px 0 6px; } .kts-card18-img { height: 100px; background: #D8DCE1; margin: 0 10px; border-radius: 6px; }

19. 縦長プロフィール＋SNSリンクカード

プロフィールの下に、SNSへのリンクを並べたカードです。

実際の見た目

HTMLコード

<div class="kts-card19"> <div class="kts-card19-avatar"></div> <h3 class="kts-card19-name">佐藤 花子</h3> <p class="kts-card19-role">編集担当</p> <div class="kts-card19-links"> <a href="#" aria-label="X">𝕏</a> <a href="#" aria-label="Instagram">IG</a> </div> </div>

CSSコード

.kts-card19 { width: 220px; text-align: center; padding: 24px 16px; background: #fff; border-radius: 12px; border: 1px solid #E4E4E4; font-family: sans-serif; } .kts-card19-avatar { width: 72px; height: 72px; border-radius: 50%; background: #D8DCE1; margin: 0 auto 12px; } .kts-card19-name { font-size: 15px; margin: 0 0 2px; color: #1F2933; } .kts-card19-role { font-size: 12px; color: #8A94A0; margin: 0 0 14px; } .kts-card19-links a { display: inline-block; width: 30px; height: 30px; line-height: 30px; background: #F1F3F5; border-radius: 50%; margin: 0 4px; color: #1F2933; text-decoration: none; font-size: 12px; }

20. グラデーション枠のプレミアムカード

枠線だけにグラデーションを使い、白背景でも高級感を出すカードです。

実際の見た目

HTMLコード

<div class="kts-card20"> <h3 class="kts-card20-title">プレミアム会員</h3> <p class="kts-card20-desc">限定コンテンツにアクセスできます。</p> </div>

CSSコード

.kts-card20 { width: 260px; padding: 22px; border-radius: 12px; background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #FFD23F, #D97757); background-origin: border-box; background-clip: padding-box, border-box; font-family: sans-serif; } .kts-card20-title { font-size: 16px; margin: 0 0 8px; color: #1F2933; } .kts-card20-desc { font-size: 13px; color: #666; margin: 0; }

カスタマイズの小ワザ

• 画像部分（グレーの四角）は、imgタグに置き換えるか、background-imageで実際の写真に差し替えてください。
• 文字を変えたい時は、HTMLコード内のテキスト部分を書き換えてください。
• カードを横に並べたい時は、複数のカードを display: flex の親要素で囲むと並べやすくなります。
• 12番の星評価や15番の達成率バーは、表示する数値に応じて、CSS内の数値（幅や星の数）を書き換えてください。
• ボタンやリンクの遷移先は、実際のページのURLに書き換えてから公開してください。

まとめ｜早見表

用途	該当するカード
商品紹介	01, 04, 07, 20
プロフィール紹介	02, 19
料金プラン	03, 08
ブログ・記事一覧	05, 16, 17
特徴・機能紹介	06, 14
イベント・お知らせ	10, 11
実績・レビュー	12, 15, 18
その他	09, 13

20個のカードは、商品紹介・プロフィール・料金プラン・レビューなど、用途ごとに使い分けられる。画像やテキストを差し替えるだけで、そのままサイトに組み込める。