UI Component Labデータ表示
Description list 説明リスト
確認画面の回答のように、項目名と値や説明を組にして並べたもの。
デモ
- 氏名
- 山田 太郎
- 生年月日
- 1990年4月1日
- メールアドレス
- taro@example.com
- 住所
- 東京都千代田区霞が関1-2-3
別名
- Descriptions — Ant Design
- Summary list — GOV.UK Design System
- 説明リスト — デジタル庁デザインシステム
見分けるポイント
左（または上）に灰色の短い項目名、その横に値がある行が並び、細い線で区切られることが多い。
挙動
- 操作する部品ではなく、読むためのもの。
- このデモは <dl> を使い、各行を <dt>（項目名）と <dd>（値）で書いている。スクリーンリーダーが組として扱える。
キーボード操作
| キー | 動作 |
|---|---|
| — | なし。 |
使い分け・注意点
- 用語集・よくある質問・仕様・入力内容の確認など、項目名と値の組が続く情報に使う。
- 行と列で値を比べるならテーブルを、項目名がなく並べるだけなら箇条書きリストを使う。
似た部品との違い
- リスト（箇条書きリスト）: 説明リストは項目名と値を組にして並べ、リストは項目を1つずつ並べる。
- テーブル: 説明リストは1つの対象について項目名と値の組を並べ、テーブルは行と列で値を比べる。
出典
- MDN: <dl> (最終確認日: )
- デジタル庁デザインシステムウェブサイト「説明リスト」をもとに作成 (最終確認日: )