HTMLでol要素の入れ子で親の番号を引き継いでのナンバリング方法
目次
1. 入れ子で親の番号を引き継いでナンバリングするには？
当サイトの記事でol要素を使用してリストをナンバリングしているのですが、今回入れ子で親の番号を引き継いで表示したい事があったので調べて見ました。
親の番号を引き継ぐにはどうしたら良いかというと、CSSで指定する事で下記の様な感じになります。
2. 参考になったウェブサイト
3. サンプルコード
それでは上記サイトを参考にしたサンプルコードです。
完成イメージは上記の画像なのでHTMLは次の通りになります。
<ol>
<li>有効化</li>
<li>グループ化</li>
<li>UI
<ol>
<li>テーマ
<ol>
<li>UIでライトを設定</li>
<li>UIでダークを設定</li>
</ol>
</li>
<li>ウィンドウサイズに合うようにLightboxのサイズを調整する</li>
<li>アニメーションを有効にする</li>
<li>スライドショーを自動的に再生する</li>
<li>スライドまでの時間（秒）</li>
<li>項目をループさせる</li>
<li>オーバーレイの透明度（0-1)</li>
<li>デフォルトのタイトルを有効にする</li>
</ol>
</li>
</ol>CSSに下記のコードを追加する事で親の番号を子に割り当てる事が出来ます。
ol {
list-style:none;
counter-reset:counter;
}
ol li::before {
content:counters(counter, "-") ". ";
counter-increment:counter;
}
ol li ol {
list-style:none;
counter-reset:counter;
}4. 落とし穴
ですが、上記のコードのままですと他のol要素にまで影響が出てしまい、ナンバリングがおかしくなったりしました。
そこでクラス名を指定する事で回避する事が出来ました。
5. クラス名：Nested としたサンプルコード
<ol class="Nested">
<li>有効化</li>
<li>グループ化</li>
<li>UI
<ol>
<li>テーマ
<ol>
<li>UIでライトを設定</li>
<li>UIでダークを設定</li>
</ol>
</li>
<li>ウィンドウサイズに合うようにLightboxのサイズを調整する</li>
<li>アニメーションを有効にする</li>
<li>スライドショーを自動的に再生する</li>
<li>スライドまでの時間（秒）</li>
<li>項目をループさせる</li>
<li>オーバーレイの透明度（0-1)</li>
<li>デフォルトのタイトルを有効にする</li>
</ol>
</li>
</ol>ol.Nested {
list-style:none;
counter-reset:counter;
}
ol.Nested li::before {
content:counters(counter, "-") ". ";
counter-increment:counter;
}
ol.nested li ol {
list-style:none;
counter-reset:counter;
}6. 解説
- counter-resetプロパティはカウントをセットする変数と初期値を設定します。
- counter-reset:変数名 初期値;のように指定しますが、初期値の設定を省略した場合は、初期値が0となります。
- 変数（ここではcounter）は子孫要素に対して同じ名前で準備することができます。
- 子孫要素で同じ名前でリセット（counter-reset）するまで、その間の要素で使用ことができます。
- counter-incrementプロパティはカウントを増やす変数と増加数を指定します。
- counter-reset:変数名 増加数;のように指定しますが、増加数の設定を省略した場合は、初期値が1となります。
- counters関数は、対象の変数すべてを与えられた順番に連結して出力します。
7. 注意事項
本プロパティはブラウザ依存のようです。
最新のFirefoxとChromeでは期待通りに表示されることを確認していますが古いブラウザでは確認しきれていません。
近い将来、古いブラウザが淘汰されればスタンダードなテクニックとして使えるようになると思います。
