HTMLで二重にネストしたリスト

 HTMLで二重にネストしたリスト（入れ子になったリストがさらにネストしている状態）を作るのは簡単です。<ol>（順序付きリスト）または <ul>（順序なしリスト）を入れ子にするだけで実現できます。

基本的な構造

HTML

<ul>
  <li>親リスト項目1
    <ul>
      <li>子リスト項目1-1
        <ul>
          <li>孫リスト項目1-1-1</li>
          <li>孫リスト項目1-1-2</li>
        </ul>
      </li>
      <li>子リスト項目1-2</li>
    </ul>
  </li>
  <li>親リスト項目2
    <ol>
      <li>子リスト項目2-1</li>
      <li>子リスト項目2-2
        <ul>
          <li>孫リスト項目2-2-1</li>
          <li>孫リスト項目2-2-2</li>
        </ul>
      </li>
    </ol>
  </li>
</ul>

解説

1. 親リスト (<ul> または <ol>): まず、一番外側のリストを作成します。ここでは <ul> を使用しています。
2. 親リスト項目 (<li>): 親リストの中に、個々のリスト項目を <li> タグで記述します。
3. 子リスト (<ul> または <ol>): 親リスト項目の中に、さらに別のリスト (<ul> または <ol>) を記述することで、ネストされたリストを作成します。
4. 子リスト項目 (<li>): 子リストの中にも、同様に <li> タグで個々のリスト項目を記述します。
5. さらにネスト (<ul> または <ol>): 子リスト項目の中に、さらに別のリストを記述することで、二重にネストした状態（孫リスト）を作ることができます。

例：順序なしリストの中に順序付きリストをネスト

HTML

<ul>
  <li>最初の親項目
    <ol>
      <li>最初の子供項目 (1)</li>
      <li>最初の子供項目 (2)
        <ul>
          <li>最初の孫項目 (a)</li>
          <li>最初の孫項目 (b)</li>
        </ul>
      </li>
    </ol>
  </li>
  <li>二番目の親項目</li>
</ul>

例：順序付きリストの中に順序なしリストをネスト

HTML

<ol>
  <li>最初の親項目
    <ul>
      <li>最初の子供項目 (点)</li>
      <li>最初の子供項目 (点)
        <ol>
          <li>最初の孫項目 (I)</li>
          <li>最初の孫項目 (II)</li>
        </ol>
      </li>
    </ul>
  </li>
  <li>二番目の親項目</li>
</ol>

ポイント

• リストは、<ol> (Ordered List - 順序付き) または <ul> (Unordered List - 順序なし) で始めます。
• 各リストの項目は <li> (List Item) タグで囲みます。
• ネストしたいリストは、親の <li> タグの中に記述します。
• ネストの深さに制限はありませんが、深くネストしすぎると視覚的に分かりにくくなる可能性があります。
• CSSを使って、ネストされたリストのインデントやマーカー（箇条書きの点や番号）のスタイルを調整できます。

このように、<ul> と <li>、または <ol> と <li> を組み合わせることで、簡単に二重、三重とネストしたリストを作成できます。リスト構造を正しく記述することが重要です。