<li>タグ(リスト)を入れ子にして階層化させる

liタグ

HTMLでプルダウンメニューなど、<li>タグを入れ子にして階層化させることは多いので、<li>タグを使った入れ子の基本的なコーディングについて紹介します。

<li>タグの入れ子について

リスト項目を階層化するのに便利な入れ子ですが、記述にはルールがあります。

入れ子にするリストは<li>内に記述する

入れ子にするリストは親リストの外に記述するのではなく、親リストの<li>タグ内に記述します。

入れ子の正しい記述

下記の「入れ子にできるタグ」も親リスト内に記述し階層化します。
例)pを子リストに追加する場合:<li><p>~</p></li>

liの入れ子にできるタグ

ul、ol、dl、div、h1~h6、p、span、img、strongなど

入れ子のコードサンプル

入れ子で間違い易いのは、子リストを追加する親リストの開始タグ(濃いグレー)の部分になります。

サンプル(基本)

【表示例】

  • 親リスト1
    • 子リスト11
    • 子リスト12
    • 子リスト13
  • 親リスト2
  • 親リスト3
    • 子リスト31
    • 子リスト32
    • 子リスト33

【HTML】

<ul>
  <li>親リスト1
  <ul>
    <li>子リスト11</li>
    <li>子リスト12</li>
    <li>子リスト13</li>
  </ul>
  </li>
  <li>親リスト2</li>
  <li>親リスト3
  <ul>
    <li>子リスト31</li>
    <li>子リスト32</li>
    <li>子リスト33</li>
  </ul>
  </li>
</ul>

サンプル(ul以外を子リストにした場合)

【表示例】

  • 親リスト1
    1. 子リスト11
    2. 子リスト12
    3. 子リスト13
  • 親リスト2
  • 親リスト3

    子リスト31(pタグ)

【HTML】

<ul>
  <li>親リスト1
  <ol>
    <li>子リスト11</li>
    <li>子リスト12</li>
    <li>子リスト13</li>
  </ol>
  </li>
  <li>親リスト2</li>
  <li>親リスト3
  <p>子リスト31(pタグ)</p>
  </li>
</ul>

<p>タグなどを子リストにする場合も親リストの内に記述します。

リスト内の<p>タグに行頭記号はつきません。(サンプル11行目)
行頭記号は<ul><ol>内の<li>が対象ですので、<p>タグ(<li>以外)に行頭記号はつきません。

liタグ関連記事