HTMLの順序リスト(ol)に深さに応じて連番を付けるCSS例

HTMLのolとliのリストタグに対して、以下のような本の目次のような連番を打ちたかったとします。

本の目次のような連番

僕は以前これを実装する方法として、やたら長いコードを書いていました。

それが以下。

スポンサーリンク
レクタングル(大)広告

counter()を用いた方法

僕はこれまでCSSで開発者が独自に番号を指定するには、counter()関数しかないと思って、以下のような長ったらしいコードを書いていました。

/************************************
** 連番を振る
************************************/
.wrap-css-selector ol {
  list-style: none;
}
.wrap-css-selector ol li:before {
  margin-right: 6px;
}
.wrap-css-selector ol > li {
  counter-increment: c-h2;
  counter-reset: c-h3;
}
.wrap-css-selector ol > li:before {
  content: counter(c-h2) ".";
}
.wrap-css-selector ol > li > ol > li {
  counter-increment: c-h3;
  counter-reset: c-h4;
}
.wrap-css-selector ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li {
  counter-increment: c-h4;
  counter-reset: c-h5;
}
.wrap-css-selector ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li {
  counter-increment: c-h5;
  counter-reset: c-h6;
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) "." counter(c-h5) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li > ol > li {
  counter-increment: c-h6;
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) "." counter(c-h5) "." counter(c-h6) ".";
}

我ながら、無駄が多いコードだと思います。

けど、上記のようなh2~h6まで深さを表す連番割り振るにしても、もっとスマートな方法がありました。

counters()を用いた方法

それが、counters()関数を用いた方法です。

counters()関数を用いると、以下のようにたったこれだけのコードで書くことが可能です。

.wrap-css-selector ol {
  list-style: none;
  counter-reset: toc;
}
.wrap-css-selector ol li:before {
  margin-right: 6px;
  counter-increment: toc;
  content: counters(toc,".") ".";
}

方が断然スマートですね。美しいです。

この方法は、CocoonフォーラムにてものぐさWEBノートを運営されている草村さんに教えていただきました。

動作確認

counters()関数を用いた方法でも問題なく連番になっています。

counters()関数を用いた連番

counter()バージョンのCSSコードサイズ

文字数カウントツールを用いて文字サイズ(バイト数)を調べてみても、以前のものは「1243バイト」になっていました。

counter()バージョンの文字サイズ

CSS縮小化は行っていないのであくまで目安です。

counters()バージョンのCSSコードサイズ

counters()関数を用いた場合は、「192バイト」とかなりCSSを削減できました。

counters()バージョンのCSSコードサイズ

CSS縮小化は行っていないのであくまで目安です。

まとめ

このようにcounters()関数を利用することで、連番を低コストで書くことができます。

正直、counters()関数があるの自体知りませんでした。

counter()や、counters()に関して詳しくは、以下を参照してください。

CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。