箇条書きリスト(概要)

箇条書きリストは、1つ以上の項目を列挙するときに使用します。HTMLには<ul>要素と<ol>要素がありますが、本デザインシステムではすべて<ul>要素を使い、項目番号は地のテキストとして扱います。
ユースケース
- 1つ以上の項目を順番に関わりなく列挙するとき
- リストマークタイプを使用します。
- 項目番号自体も情報として必要な箇条書きをするとき
- 項番タイプを使用し、項番自体もテキストで表記します。たとえば、法律の条文、利用規約、ガイドライン等のコンテンツでは、項番自体が情報として不可欠です。手順や個数を数えるための項番も情報であるため、同様に地のテキストとして表記します。
注意が必要なケース
- HTMLの
<ol>要素を使用しない - 通常、ブラウザは
<ol>要素の項番をコンテンツとして扱わないため、項番をテキストとしてコピーすることができません。また、項目自体に対して固有の項番に固定することもできないため、項目の順序を変えたり、項目の追加削除をしたりした場合に、項番が変わってしまいます。項番自体も重要となる法律の条文や利用規約、ガイドライン等のコンテンツでは、特に注意が必要です。<ol>要素、およびCSSのカウンターによる項番を使用しないでください。
関連コンポーネント
- リソースリスト
- 説明リスト
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | デザインデータ(Figma) | 提供中 |
| HTML版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 | |
| React版実装 | ソースコード(GitHub) | 提供中 |
| サンプル(Storybook) | 提供中 |