ol要素の入れ子で親の番号を子に割り当てる方法
ol要素の入れ子で親の番号を子に割り当てる方法を紹介します。
HTMLマークアップ
<ol class="list">
<li>タイトル1
<ol>
<li>タイトルA
<ol>
<li>タイトルA-1</li>
<li>タイトルA-2</li>
</ol>
</li>
<li>タイトルB
<ol>
<li>タイトルA-1</li>
<li>タイトルA-2</li>
</ol>
</li>
</ol>
</li>
<li>タイトル2
<ol>
<li>タイトルC</li>
<li>タイトルD</li>
</ol>
</li>
</ol>
完成イメージ
完成イメージでお分かりのとおり、子リストに親リストの番号が引き継がれています。
参考:デフォルトの表示
1.CSSの設定
親の番号を子に割り当てるには、次のCSSを適用します。
ol {
counter-reset: section;
}
li {
list-style: none;
}
ol>li:before {
content : counters(section, '-') '. ';
counter-increment : section;
}
2.解説
まず、before擬似要素に適用したcontentプロパティのcountersは、入れ子になったカウンタ名(section)の異なる階層の間に文字列(ここではハイフン)を挿入します。
その後に記述したピリオドと半角スペースは、挿入されたカウンタの後方に付与されます。
次にcounter-incrementプロパティは、指定したカウンタ名がページ内に出現するたびに、カウンタの値をインクリメントします。
そしてol要素に適用したcounter-resetプロパティで、指定したカウンタ名の(同一階層の)値をリセットします。
3.注意事項
本プロパティはブラウザ依存です。
最新のFirefox/Google Chromeでは期待通りに表示されることを確認しています。
IE9では表示を確認できていません。
古いブラウザが淘汰されればスタンダードなテクニックとして使えるようになると思います。
Posted by yujiro このページの先頭に戻る
likebox
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
- CSSで背景画像をページの中心に表示する方法
- 円マークがバックスラッシュで表示される理由
- CSSでbold指定した文字の幅を狭くする方法
- CSSでfloatを解除する方法のまとめ
- 三点リーダが真ん中に表示されない理由
- CSSでoption要素を非表示にするときの不具合について
- レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS
- CSS拡張メタ言語「LESS」の使い方
- Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する
- CSS「ボックスモデル」の意味
- CSSでtable幅を設定するためのまとめ
- いまさら聞けないCSS font-familyのまとめ
- ol要素のstart属性を使わずにCSSで番号を途中から振る方法
zenback
人気エントリー
トラックバックURL
コメントする
greeting