ネストされたリスト
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 14/60。
リストの中に別のリストを配置することができます。これは入れ子になったリスト（ネストされたリスト）と呼ばれます。これは、アウトラインや多階層メニューなどの階層構造を作成するのに便利です。
入れ子になったリストを作成するには、単に <ul> または <ol> 要素を別のリストの <i><li></i> 要素の中に配置します。
入れ子になった順序なしリストの例を次に示します。
<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
順序付きリストを入れ子にしたり、両方を組み合わせたりすることもできます。
チャレンジ
簡単入れ子になったリストを持つHTMLドキュメントを作成してください。リストは以下のようになります：
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
チートシート
入れ子になったリストは、別のリストの <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>順序付きリストを入れ子にしたり、順序付きリストと順序なしリストを互いに組み合わせて入れ子にしたりすることができます。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
