ホームに戻る
目次 :

リストの階層化

リスト(ol 、ul)の項目(li)内にさらにリストを配置することで、リストが階層化される。

箇条書きリスト(ul)の階層化

HTMLの記述

<ul> <!-- 箇条書きリスト ここから --> <li>親</li> <li>親 <ul> <!-- 子のulはli中に記述する --> <li>子 <ul> <li>孫 <ul> <li>曾孫</li> <li>曾孫</li> </ul> </li> </ul> </li> <li>子</li> </ul> </li> </ul> <!-- 箇条書きリスト ここまで -->

番号付きリスト(ol)の階層化 : 枝番付きリスト

以下のようなリストを考える。
  1. 親
    1. 子
    2. 子
  2. 親
  3. 親
    1. 子
      1. 孫
      2. 孫
      3. 孫
      4. 孫
    2. 子
      1. 孫
        1. 曾孫
        2. 曾孫
      2. 孫
  4. 親

準備 : CSSの設定

リスト項目の行頭文字(番号)(ol li:before)を以下のように設定する。
/* (行頭文字) */ ol li:before { counter-increment: cnt; content: counters(cnt, ".")". "; }
content プロパティで区切り文字を設定することができる。

HTMLの記述

<ol> <!-- 番号付きリスト ここから --> <li>親 <ol> <!-- 子のolはli中に記述する --> <li>子</li> <li>子</li> </ol> </li> <li>親</li> <li>親 <ol> <li>子 <ol> <li>孫</li> <li>孫</li> <li>孫</li> <li>孫</li> </ol> </li> <li>子 <ol> <li>孫 <ol> <li>曾孫</li> <li>曾孫</li> </ol> </li> <li>孫</li> </ol> </li> </ol> </li> <li>親</li> </ol> <!-- 番号付きリスト ここまで -->