ol要素のように任意の要素に自動連番を振るCSS – counter関数

/ ipsjk

先日、とある仕事でブログ記事のコーディングをしておりまして、「各見出しに連番を振りたい」というニーズが出てきました。

ol要素を使い、<ol><li><h2>...みたいな書き方をすればできるのですが、ちょっとかったるいし、文書構造的にどうよということで、前に見かけて気になっていたけど使う機会がなかったCSSのcounterというものを調べて使ってみました。

その感想は、

「めっちゃ便利…」

ということで勢い余ってここで紹介してみたいと思います。

今回のゴール

今回のゴールのイメージはこんな感じです。見出しに１〜の番号を振りたいと。

でも手打ちするんではなく、平日の昼間からゴロゴロしつつ、寝ている間に誰かが勝手に連番振ってくれないかな～というのが今回のポイントです。

指定方法

自動連番を振るための設定はこんな感じ。

連番を振りたい要素の親要素か先祖の要素にカウンターを設置します。カウンターの初期値は0にします。

今回の例ではh2要素が出現する度に、カウンターの数値を1ずつアップしていき、見出し文字の手前に疑似要素を用いて付与していきます。

まずはHTMLのコードサンプル。

<div class="parent">
	<h2>最初の見出し</h2>
	<p>ダミー文章、ダミー文章、ダミー文章、ダミー文章、ダミー文章...</p>
	
	<h2>次の見出し</h2>
	<p><img src="https://via.placeholder.com/200x140/ddd/fff" alt=""></p>
	<p>ダミー文章、ダミー文章、ダミー文章、ダミー文章、ダミー文章...</p>
	
	<h2>最後の見出し</h2>
	<p>ダミー文章、ダミー文章、ダミー文章、ダミー文章、ダミー文章...</p>
</div>

続いてCSSのコードサンプル

.parent {
	counter-reset: my-counter 0;
}
.parent h2:before {
	counter-increment: my-counter
	content: counter(my-counter) '. ';
}
  • カウンターの設置場所はdiv.parent。counter-resetプロパティを使用し、カウンター名（任意）を決める。例としてmy-counterとする。
  • カウンター名の横に半角スペースを空け、初期値として0を指定。0の場合は省略OK。（ちなみに0の部分を他の数字にすればその数字からカウントアップする）
  • カウンターの数値を使用する場所（今回はh2のbefore疑似要素）で、counter-incrementプロパティを使用し、my-counterの数値を1アップさせる。
  • counter関数を使いmy-counterの数値をcontentプロパティの値として設定する。
  • counter関数の後の'. 'は、数字と見出し文字との間に入る文字。

「文字で説明されてもわかりにくいんじゃ！図をよこせ、図を！」という方へ。

CSSの内訳をこちらにご用意させていただきました。

結果。

See the Pen CSS counter by Nori (@nori2tae) on CodePen.

ちなみにこのdiv.parentがもう１セット出現する場合は、その最初の見出し要素の数字はまた１〜表示されます。

だからプロパティ名がcounter-reset（カウンターリセット）なわけでごザーマスのよ奥様。

カウンターの入れ子

ちなみに1-2. とか2-3-1. といった具合に、多次元的に連番を振りたいという場合はcountersという関数があります。

この説明はMDNの記事に譲りたいと思います（他力本願脳）

カウンターの入れ子[MDN]

さいごに

指定方法はちょっと癖がありますが、覚えちゃえば便利ということで。
ご活用あれ。