ネストされたリスト

リストの中に別のリストを配置できます。これは入れ子になったリストと呼ばれます。アウトラインや多階層メニューなど、階層構造を作成するのに便利です。 

入れ子のリストを作成するには、別のリストの <li>要素の中に<ul>または<ol>要素を配置するだけです。

入れ子になった順序なしリストの例を示します。

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

2番目の項目には、2つのサブ項目を含む入れ子のリストがあります。ブラウザーでは、次のように表示されます。

• 項目 1
• 項目 2
  • サブ項目 2.1
  • サブ項目 2.2
• 項目 3

順序付きリストを入れ子にしたり、両方を組み合わせたりすることもできます。