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

2020年4月18日

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

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

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

コーディングのルール

親の<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-1
    2. 子リスト1-2
    3. 子リスト1-3
  2. 親リスト2
    1. 子リスト2-1
    2. 子リスト2-2
  3. 親リスト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
    • 子リスト1-2
    • 子リスト1-3
  2. 親リスト2
    • 子リスト2-1
    • 子リスト2-2
  3. 親リスト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>