カード Card

関連する情報をまとまりとして表示するコンテナ。一覧表示や詳細表示で使用。

使用場面: 商品一覧、記事一覧、プロフィール表示、ダッシュボードのウィジェット 採用例: Pinterest, Trello

ライブデモ

新着

カードタイトル

カードの説明文がここに入ります。簡潔に内容を伝えます。

2026/04/01
人気

別のカード

異なるコンテンツでも同じフォーマットで統一感を出せます。

2026/03/28

ソースコード

<div class="demo-cards">
  <div class="demo-card">
    <div class="demo-card-image"></div>
    <div class="demo-card-body">
      <span class="demo-card-badge">新着</span>
      <h4 class="demo-card-title">カードタイトル</h4>
      <p class="demo-card-desc">カードの説明文がここに入ります。簡潔に内容を伝えます。</p>
      <div class="demo-card-footer">
        <span class="demo-card-date">2026/04/01</span>
        <button class="demo-card-btn">詳細</button>
      </div>
    </div>
  </div>
  <div class="demo-card">
    <div class="demo-card-image" style="background:color-mix(in srgb,var(--ui-primary) 30%,transparent);"></div>
    <div class="demo-card-body">
      <span class="demo-card-badge">人気</span>
      <h4 class="demo-card-title">別のカード</h4>
      <p class="demo-card-desc">異なるコンテンツでも同じフォーマットで統一感を出せます。</p>
      <div class="demo-card-footer">
        <span class="demo-card-date">2026/03/28</span>
        <button class="demo-card-btn">詳細</button>
      </div>
    </div>
  </div>
</div>
.demo-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.demo-card {
  border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
  width: 240px; background: #fff; transition: box-shadow 0.2s, transform 0.2s;
}
.demo-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }
.demo-card-image {
  height: 120px; background: color-mix(in srgb, var(--ui-primary) 15%, #f3f4f6);
}
.demo-card-body { padding: 14px 16px; }
.demo-card-badge {
  display: inline-block; padding: 2px 8px; background: var(--ui-primary);
  color: #fff; border-radius: 4px; font-size: 11px; font-weight: 600; margin-bottom: 8px;
}
.demo-card-title { margin: 0 0 6px; font-size: 15px; color: #111; }
.demo-card-desc { margin: 0 0 12px; font-size: 13px; color: #666; line-height: 1.5; }
.demo-card-footer { display: flex; align-items: center; justify-content: space-between; }
.demo-card-date { font-size: 12px; color: #999; }
.demo-card-btn {
  padding: 6px 14px; background: var(--ui-primary); color: #fff;
  border: none; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.demo-card-btn:hover { opacity: 0.85; }

AIプロンプト

Basic 
カードコンポーネントをHTML/CSSで作ってください。画像、タイトル、説明文、ボタンを含むカードです。
Custom 
以下の仕様でカードを実装してください。
- 画像 + バッジ + タイトル + 説明 + フッターの構成
- プライマリカラー: #2563eb
- ホバー時にシャドウ + 浮き上がりエフェクト
- レスポンシブなグリッドレイアウト
- カード角の丸み
- アスペクト比固定の画像領域
Advanced 
高機能カードシステムを実装してください。
- 複数バリエーション（水平/垂直、画像あり/なし、コンパクト/フル）
- Intersection Observer で遅延読み込み
- skeleton ローディング状態
- カードクリック全体をリンクとして機能（:has() セレクタ使用）
- article + h2/h3 の適切なセマンティクス
- レスポンシブグリッド（CSS Grid + auto-fit/auto-fill）
- フォーカス可能でキーボードナビゲーション対応
- ダークモード対応
- コンテンツの長さに関わらず均一な高さ
← カタログに戻る