カードレイアウト
画像帯・見出し・本文・メタ情報を縦に積んだ、王道のコンテンツカード。一覧にも詳細にも使える、最も基本的なカード部品。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 記事・商品を 1 枚に要約する基本カード
- 画像→見出し→本文→メタの優先順位を示す一覧
- 一覧と詳細の両方で使い回す部品
- 避ける場面
- 本文が長く 1 枚に収まらない内容
- 画像が無く見出しだけの項目（リスト行へ）
- 構成要素
- 画像帯
- タグ
- 見出し
- 本文
- メタ（アバター／著者／日付）
- 持っている状態
- 通常
- キーボード
操作要素なし（見本にリンクは無い）。実装ではカード全体か見出しをリンクにする
- 支援技術
article は aria-labelledby で h3 を名前に持ち、画像帯は role=img＋aria-label、アバターは aria-hidden。タグ→h3→本文→著者→日付の順に読まれる
- 動き
なし
デザインの要点
- 画像帯→タグ→見出し→本文→メタの順は情報の優先順位そのもの。上ほど大きく、下ほど小さく薄くする
- カード幅は 300px 上限。本文 12px で 1 行 20 字前後に収まり、3 行で読み切れる
- 影は 0 4px 16px の 1 段だけ。色の主張は画像帯に限り、カードが並んだとき影や枠で競わせない
実装メモ
画像は linear-gradient のダミーです。実運用では .card-media を <img style="width:100%;height:120px;object-fit:cover"> などに置き換えてください。
コード（コピーして使えます）
<div class="stage">
<article class="card" aria-labelledby="card-title-1">
<div class="card-media" role="img" aria-label="記事のサムネイル"></div>
<div class="card-body">
<span class="card-tag">デザイン</span>
<h3 class="card-title" id="card-title-1">余白でつくる、読みやすいカード</h3>
<p class="card-text">画像・見出し・本文・メタを縦に積むだけで、情報の優先順位が自然に伝わります。</p>
<div class="card-meta">
<span class="card-avatar" aria-hidden="true"></span>
<span class="card-author">中村 あおい</span>
<span class="card-dot" aria-hidden="true">·</span>
<span class="card-date">7月13日</span>
</div>
</div>
</article>
</div>