【HTML】liにulやolを入れ子にしてリストを階層表示する ※そのまま使えるサンプルコード付き
HTMLでリストを表示するのに使用する<li>タグですが、<ul>タグや<ol>タグ入れ子にすることでリストを階層化して表示できるようになります。
階層化したリストは、自分で記事目次を作るときに役立つので参考にしてしてみてください。
サンプルコードも載せています。
Contents
コーディングのルール
親の<li>タグ内に記述する
入れ子にしたいリストは、親となる<li>タグの中に記述する必要があります。
<ul>
<li>aaa
<ul>
<li>aaa-1</li>
</ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ul>サンプルコード
ul ： Unordered List のサンプル
【Web表示】
- 親リスト1
- 子リスト1-1
- 子リスト1-2
- 子リスト1-3
- 親リスト2
- 子リスト2-1
- 子リスト2-2
- 親リスト3
【サンプルコード】
<ul>
<li>親リスト1
<ul>
<li>子リスト1-1</li>
<li>子リスト1-2</li>
<li>子リスト1-3</li>
</ul>
</li>
<li>親リスト2
<ul>
<li>子リスト2-1</li>
<li>子リスト2-2</li>
</ul>
</li>
<li>親リスト3</li>
</ul>ol ： Oredered List のサンプル
【Web表示】
- 親リスト1
- 子リスト1-1
- 子リスト1-2
- 子リスト1-3
- 親リスト2
- 子リスト2-1
- 子リスト2-2
- 親リスト3
【サンプルコード】
<ol>
<li>親リスト1
<ol>
<li>子リスト1-1</li>
<li>子リスト1-2</li>
<li>子リスト1-3</li>
</ol>
</li>
<li>親リスト2
<ol>
<li>子リスト2-1</li>
<li>子リスト2-2</li>
</ol>
</li>
<li>親リスト3</li>
</ol><ul>タグと<ol>タグの複合サンプル
【Web表示】
- 親リスト1
- 子リスト1-1
- 子リスト1-2
- 子リスト1-3
- 親リスト2
- 子リスト2-1
- 子リスト2-2
- 親リスト3
【サンプルコード】
<ol>
<li>親リスト1
<ul>
<li>子リスト1-1</li>
<li>子リスト1-2</li>
<li>子リスト1-3</li>
</ul>
</li>
<li>親リスト2
<ul>
<li>子リスト2-1</li>
<li>子リスト2-2</li>
</ul>
</li>
<li>親リスト3</li>
</ol>■HTML&CSSを学習するのにオススメの書籍3選■
HTMLやCSSの基礎から実践までしっかりと学習できる1冊！
リンク
初心者にもわかりやすい丁寧な解説で理解を深めれる1冊！
リンク
HTML&CSSの基本を！
リンク
■合わせて読みたいHTML&CSSの記事！■
【HTML】olタグの番号を任意の好きな数字から始める | ※サンプルコードつき
【HTML】olタグのリスト番号を逆順（降順）にする | ※そのまま使えるサンプルコードあり
【HTML サンプルコード付き】記事内に枠を作ってその中に文字を書く | style属性とborderプロパティ
【HTML】テーブルのセルを結合して表示を整える (※サンプルコードあり)