【HTML】liにulやolを入れ子にしてリストを階層表示する ※そのまま使えるサンプルコード付き

2020年4月18日2022年2月17日

HTMLでリストを表示するのに使用する<li>タグですが、<ul>タグや<ol>タグ入れ子にすることでリストを階層化して表示できるようになります。

階層化したリストは、自分で記事目次を作るときに役立つので参考にしてしてみてください。

サンプルコードも載せています。

Contents

1. コーディングのルール
- 1.1. 親の<li>タグ内に記述する
2. サンプルコード

コーディングのルール

親の<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-2
3. 子リスト1-3
親リスト2
1. 子リスト2-1
2. 子リスト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タグの番号を任意の好きな数字から始める | ※サンプルコードつき