説明リスト ( 概要 )
「説明したいこと」と「その説明文」のペアを1つの項目として数え、それが複数連なるようなコンテンツの時に使用します。
ユースケース
- 用語と説明をセットにして繰り返すとき
- 用語集、FAQの質問と回答、仕様書の項目名と内容など、定義とその説明が対になる情報を列挙する場合に使用します。
- データを名前と値のペアで示すとき
- プロフィール情報、設定項目、申請内容の確認画面など、項目名とその値を対にして並べる場合に使用します。
注意が必要なケース
- データを比較する場合はテーブルを使う
- 各項目の値を並べて比較したり、行と列で構造化したりする必要がある情報には、テーブルを使用してください。説明リストは、名前と値のペアが繰り返される情報に使用します。
- セクションの主題を示す場合は見出しを使う
- セクションの主題を示す必要がある場合は、説明リストのタイトルで見出しを表現するのではなく、見出しを使用してください。
- 用語と説明のペアでない場合は箇条書きリストを使う
- 項目を列挙したり、項目の階層構造を示したりするだけの場合は、説明リストではなく箇条書きリストを使用してください。
- 複数の情報や操作を含む項目にはリソースリストを使う
- 名前と説明などのペアだけでなく、複数の情報やリンク、選択などの操作を含む項目を一覧表示する場合は、リソースリストを使用してください。
関連コンポーネント
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ | 提供予定 |
| HTML版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 | |
| React版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 |