カード
component関連する情報をひとまとまりにして枠で囲うコンテナです。ヘッダー(タイトル+補足)・本文・フッターで構成します。
プロジェクト A
最終更新: 2026-05-25
これは標準的なカードです。ヘッダー・本文・フッターを持ちます。
シンプルカード
ヘッダー / フッターを省略した最小構成。区切りは影でなくボーダーで示します。
機能
このコンポーネントの用途
関連情報をグループ化して見せる枠。最前面に重ねて操作を止めるなら modal。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓見出しは card-header > card-title、本文は card-body、操作は card-footer。
NG
- ✕elevation(浮き上がり)表現でシャドウ(card-elevated)を使わない → 標準の border 付き .card で区切る。シャドウは modal / tooltip 等の重なりレイヤー専用。
- ✕余白を直書きしない → card-header/body/footer の規定パディングを使う。
- ✕角丸・境界を独自指定しない → .card の既定(rounded-md / stroke-middle)を保つ。
- ✕テーブルだけを card で包まない → 枠と padding が二重になる。card-header に書く見出しが無いならテーブルを直接置く。
見出し・補足がある時だけ card で囲む
過剰な入れ子を避ける今月の申請
2026 年 8 月
タイトル・補足など card-header に書く内容がある時に囲む。まとまりが意味を持つ。
| 申請 A | 承認待ち |
| 申請 B | 承認済み |
見出しの無いテーブル 1 枚を card で囲まない。枠が増えるだけで意味を足さない。
カードのアクセシビリティ
カードは見た目の枠を提供するコンテナです。見出しは適切な見出し要素(h2〜h4)で階層を保ち、カード全体をリンクにする場合はリンクを入れ子にしないよう注意します。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
区切りは影でなくボーダー。card-title の見た目(サイズ)と、実際の見出しレベルを一致させる。
rem / トークンで拡大に追従し、狭幅では縦積みに reflow。高さ固定で内容を切らない。
カード自体は非対話。中のボタン/リンクが操作対象。カード全体を押せるようにするなら 1 つのリンクで包む(入れ子リンクを作らない)。
card-title を h2〜h4 にすると、SR の見出しジャンプでカードを辿れる。装飾の枠は読み上げに影響しない。
DS が担保する機能
追加実装なしで満たされる
- ✓区切りをボーダーで示し、枠自体は読み上げに影響しないニュートラルな見た目
- ✓
card-title/card-subtitle/card-body/card-footerの役割別スロット - ✓reflow・テキスト拡大に耐えるトークンベースの余白
実装時の必須対応
プロダクト側で担保する
- !
card-titleは文脈に合う見出し要素(h2〜h4)にし、レベルを飛ばさない - !カード全体をクリック可能にするなら 1 つの
<a>で包むか stretched-link パターン。リンク/ボタンを入れ子にしない - !見出し・補足が無いなら card で囲まず、素の要素で十分(過剰な入れ子を避ける)
テスト方法
スクリーンリーダー / 自動チェック
- SR見出しジャンプ(H キー)で各カードのタイトルを辿れる(
card-titleが見出し要素) - 操作カード内の操作要素が Tab で辿れ、入れ子リンクが無い
- 自動axe / Lighthouse で見出し階層・コントラストを確認
card-title は見出し要素にする
達成基準:WCAG 1.3.1 情報及び関係性 / 2.4.6 見出し及びラベル
プロジェクト A
card-title を <h3> にする。SR の見出し一覧に載る。
<h3 class="card-title">プロジェクト A</h3>
card-title を <span>/<div> にしない。見た目は同じでも見出しとして辿れない。
<span class="card-title">プロジェクト A</span> <!-- 見出しでない -->