検索

メニュー

説明リスト 概要

スクリーンショット:説明リストの2つのパターンが縦に並んでいる。上はマーカーなしで、下はビュレットのマーカーが付いている。どちらも、太字の項目名とその説明文のペアが2組連なっている。

「説明したいこと」と「その説明文」のペアを1つの項目として数え、それが複数連なるようなコンテンツの時に使用します。

ユースケース

用語と説明をセットにして繰り返すとき
用語集、FAQの質問と回答、仕様書の項目名と内容など、定義とその説明が対になる情報を列挙する場合に使用します。
データを名前と値のペアで示すとき
プロフィール情報、設定項目、申請内容の確認画面など、項目名とその値を対にして並べる場合に使用します。

注意が必要なケース

データを比較する場合はテーブルを使う
各項目の値を並べて比較したり、行と列で構造化したりする必要がある情報には、テーブルを使用してください。説明リストは、名前と値のペアが繰り返される情報に使用します。
セクションの主題を示す場合は見出しを使う
セクションの主題を示す必要がある場合は、説明リストのタイトルで見出しを表現するのではなく、見出しを使用してください。
用語と説明のペアでない場合は箇条書きリストを使う
項目を列挙したり、項目の階層構造を示したりするだけの場合は、説明リストではなく箇条書きリストを使用してください。
複数の情報や操作を含む項目にはリソースリストを使う
名前と説明などのペアだけでなく、複数の情報やリンク、選択などの操作を含む項目を一覧表示する場合は、リソースリストを使用してください。

関連コンポーネント

各種リソース

種別 リソース 状態
デザイン Figmaデザインデータ 提供予定
HTML版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中
React版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中