CSSを書いていると、見出しに番号を付けたいことがあります。

例えば、

1章・はじめに
2章・CSSの基本
3章・応用編

のような見出しです。

HTMLに毎回、

<h2>1章・はじめに</h2>
<h2>2章・CSSの基本</h2>
<h2>3章・応用編</h2>

と書く方法もあります。

しかし、見出しが増えたり順番を変更したりすると、番号を手動で修正する必要があります。

そこで使えるのが、CSSのカウンターです。

CSSカウンターを使う

CSSではcounter()を使って、要素の出現回数などを数えることができます。

例えば、次のようにします。

.contents {
  counter-reset: num;
}

h2 {
  counter-increment: num;
}

h2::before {
  content: counter(num) '章・';
}

これだけで、h2に自動的に番号を付けられます。

HTMLは普通に書くだけです。

<div class="contents">
    <h2>はじめに</h2>
    <h2>CSSの基本</h2>
    <h2>応用編</h2>
</div>

すると、

1章・はじめに
2章・CSSの基本
3章・応用編

のように表示されます。

それぞれ何をしているのか

少し分かりにくいので、1つずつ見ていきます。

counter-reset

まず、

.contents {
  counter-reset: num;
}

でnumというカウンターを作り、0にリセットします。

「ここから番号を数え始める」というイメージです。

counter-increment

次に、

h2 {
  counter-increment: num;
}

とします。

これはh2が登場するたびに、numを1つ増やします。

つまり、

h2 → 1
h2 → 2
h2 → 3

というようにカウントされます。

counter()

最後に、

h2::before {
  content: counter(num) '章・';
}

とします。

counter(num)で現在のカウンターの値を取得できます。

その後ろに'章・'という文字列を追加しています。

そのため、

1章・
2章・
3章・

と表示されます。

「章・」以外にも使える

もちろん、'章・'の部分は自由に変更できます。

例えば、

h2::before {
  content: counter(num) '. ';
}

なら、

1. はじめに
2. CSSの基本
3. 応用編

となります。

h2::before {
  content: '第' counter(num) '章 ';
}

なら、

第1章 はじめに
第2章 CSSの基本
第3章 応用編

となります。

まとめ

CSSのcounter()を使うと、見出しに連番を自動で付けることができます。

見出しを追加・削除しても番号を自動で振り直してくれるので、目次のようなデザインや、章立てされたページを作るときに便利なCSS小技です。