リスト

箇条書きリスト

箇条書きリストのコンポーネントにはsu-list-bulletのクラス名を付与します。

ul要素とli要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。行頭記号にビュレットが付与され、入れ子になったsu-list-bulletのクラスが付与されたリスト要素にはインデントが加わります。

箇条書きとして項目が列挙されたリストを表示します。

<ul class="su-list-bullet" aria-label="箇条書きリスト">
  <li>リスト項目</li>
  <li>
    リスト項目
    <ul class="su-list-bullet" aria-label="2階層目の箇条書きリスト">
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>
        リスト項目
        <ul class="su-list-bullet" aria-label="3階層目の箇条書きリスト">
          <li>リスト項目</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>リスト項目</li>
</ul>

行頭記号の色はCSS変数を使って変更することが可能です。（デフォルトではベースの文字色が適用されます）

.su-list-bullet {
  --su-color-marker-list: red;
}

順序リスト

順序リストのコンポーネントにはsu-list-orderedのクラス名を付与します。

ol要素とli要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。行頭記号に項番が付与され、入れ子になったsu-list-orderedのクラスが付与されたリスト要素にはインデントが加わります。

順序に従って項目が列挙されたリストを表示します。

<ol class="su-list-ordered" aria-label="順序リスト">
  <li>リスト項目</li>
  <li>
    リスト項目
    <ol class="su-list-ordered" aria-label="2階層目の順序リスト">
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>
        リスト項目
        <ol class="su-list-ordered" aria-label="3階層目の順序リスト">
          <li>リスト項目</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>リスト項目</li>
</ol>

行頭記号の色はCSS変数を使って変更することが可能です。（デフォルトではリスト項目の文字色を継承します）

.su-list-ordered {
  --su-color-number-list: red;
}

アイテムリスト

アイテムリストのコンポーネントにはsu-list-itemsのクラス名を付与します。

ul要素とli要素、もしくはdl要素といったリスト要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。リスト項目間には余白と区切り線が加わります。

各項目を1行にまとめて列挙されるリストを表示します。

<ul class="su-list-items" aria-label="****のアイテムリスト">
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ul>

項目間の区切り線の色はCSS変数を使って変更することが可能です。

.su-list-items {
  --su-color-border-list: red;
}

アクセシビリティの支援

リストのコンポーネントではアクセシビリティの対応として、aria-label属性を用いてリストの説明を追加することで、スクリーンリーダー使用時にもリストの内容を適切に伝えることができます。また、文脈に応じてul要素、ol要素、dl要素を適切に使い分けることや、入れ子構造にすることで、階層構造が視覚的および構造的に明確になります。

<ol class="su-list-ordered" aria-label="****に関する大項目のリスト">
  <li>リストの大項目1</li>
  <li>
    リストの大項目2
    <ul class="su-list-bullet" aria-label="****に関する小項目のリスト">
      <li>リストの小項目2-A</li>
      <li>リストの小項目2-B</li>
      <li>リストの小項目2-C</li>
    </ul>
  </li>
  <li>リストの大項目3</li>
</ol>