メニュー

箇条書きリスト概要

スクリーンショット:リストマークタイプ、項番タイプ(ユースケースに基づくパターンをいくつか載せる)

箇条書きリストは、1つ以上の項目を列挙するときに使用します。HTMLには<ul>要素と<ol>要素がありますが、本デザインシステムではすべて<ul>要素を使い、項目番号は地のテキストとして扱います。

ユースケース

1つ以上の項目を順番に関わりなく列挙するとき
リストマークタイプを使用します。
項目番号自体も情報として必要な箇条書きをするとき
項番タイプを使用し、項番自体もテキストで表記します。たとえば、法律の条文、利用規約、ガイドライン等のコンテンツでは、項番自体が情報として不可欠です。手順や個数を数えるための項番も情報であるため、同様に地のテキストとして表記します。

注意が必要なケース

HTMLの<ol>要素を使用しない
通常、ブラウザは<ol>要素の項番をコンテンツとして扱わないため、項番をテキストとしてコピーすることができません。また、項目自体に対して固有の項番に固定することもできないため、項目の順序を変えたり、項目の追加削除をしたりした場合に、項番が変わってしまいます。項番自体も重要となる法律の条文や利用規約、ガイドライン等のコンテンツでは、特に注意が必要です。<ol>要素、およびCSSのカウンターによる項番を使用しないでください。

関連コンポーネント

各種リソース

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