ネストされたリスト
CoddyのHTMLジャーニー「基礎」セクションの一部。レッスン 14/60。
リストの中に別のリストを配置できます。これは入れ子になったリストと呼ばれます。アウトラインや複数階層のメニューなど、階層構造を作成するのに便利です。
入れ子になったリストを作成するには、別のリストの <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
順序付きリストを入れ子にしたり、両方を組み合わせたりすることもできます。
チャレンジ
簡単入れ子になったリストを含むHTML文書を作成してください。リストは次のようになります。
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
各サブリストは、その親の<li>の中に、その項目の閉じタグ</li>の前に配置してください（例：<li>Fruits <ol>...</ol></li>）。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
基礎のすべてのレッスン
自分で練習してみよう: Webプレイグラウンド