こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、14年目エンジニアです。
この記事では、 HTMLでul要素やol要素のリストを入れ子で表示について
- サンプルプログラム
- 実行結果
- プログラム解説
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|
ul要素やol要素については、詳しくはこちらの記事をご参考ください。
サンプルプログラムの概要
- ul要素で入れ子
- ol要素で入れ子
- ol要素ul要素混在で入れ子
の3パターンを表示させます。
入れ子のサンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>リストを入れ子で表示するサンプルプログラム</title> </head> <body> <h2>ul要素で入れ子</h2> <ul> <li>フルーツ <ul> <li>ブドウ</li> <li>メロン</li> <li>バナナ</li> </ul> </li> </ul> <h2>ol要素で入れ子</h2> <ol> <li>野菜 <ol> <li>キャベツ</li> <li>ニンジン</li> <li>大根</li> </ol> </li> </ol> <h2>ol要素ul要素混在で入れ子</h2> <ul> <li>都道府県 <ol> <li>関東地方 <ul> <li>東京都</li> <li>神奈川県</li> <li>千葉県</li> </ul> </li> <li>近畿地方 <ul> <li>大阪府</li> <li>京都府</li> <li>兵庫県</li> </ul> </li> </ol> </li> </ul> </body> </html> |
実行結果
作成したHTMLをブラウザで開きます。
3パターンでリストの入れ子が表示されることが確認できました。
プログラム解説
リストを入れ子にするにはli要素の中に、ul要素またはol要素でさらにリストを指定します。
たとえば、ここの部分ですね。
上の画像のように、赤枠のli要素の中にul要素を指定すれば入れ子で表示することができます。
まとめ：リストを入れ子で表示してみよう！
以上がHTMLでul要素やol要素のリストを入れ子で表示するサンプルプログラムでした！
入れ子で表示するのはよく使われるので、ぜひ試してみてください！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント