CSSの「魔法」でネストしたリストを美しく制御する：counters()関数の真髄
フロントエンドエンジニアたるもの、`ul`や`ol`のネスト構造には一度は頭を抱えたことがあるはずです。デザインカンプで「1.1」「1.1.2」といった階層的な番号付けを要求されたとき、かつてはJavaScriptでDOMを操作して番号を埋め込んでいましたよね。しかし、今は令和です。CSSだけで、しかも驚くほど堅牢にこれを実現する術があります。
今回は、CSSの隠れた実力者である`counter-reset`、`counter-increment`、そして本題である`counters()`関数について、実務の現場で即戦力となる知識を共有します。
—
なぜJavaScriptではなくCSSなのか？
まず、なぜCSSでやるべきか。理由はシンプルです。「責務の分離」と「堅牢性」です。
コンテンツの構造（HTML）と見た目（CSS）が乖離していると、修正のたびにJSのロジックを追いかける羽目になります。CSSのカウンター機能を使えば、DOMの構造そのものが階層を定義するため、リストの順序を入れ替えたり、動的に項目を追加・削除したりしても、番号はCSSが自動的に追従してくれます。これぞ、フロントエンドが本来あるべき姿です。
—
実践：階層的な番号付けを実装する
まずは、コピー＆ペーストで挙動を確認できるサンプルを見てください。
/ リスト全体のカウンターをリセットし、開始位置を指定 /
ol {
list-style: none; / デフォルトのマーカーを消すのが鉄則 /
counter-reset: section; / ‘section’ という名前のカウンターを初期化 /
}
ol li {
counter-increment: section; / リスト項目ごとに ‘section’ をインクリメント /
}
/ 擬似要素に階層番号を表示 /
ol li::before {
/
counters(カウンター名, 区切り文字) を指定。
今回はドット（.）で階層を連結する。
/
content: counters(section, “.”) “. “;
font-weight: bold;
}
/ ネストされたolがある場合、さらにカウンターをリセット /
ol ol {
counter-reset: subsection;
}
ブラウザの裏側で何が起きているのか？
ブラウザのレンダリングエンジンは、CSSのプロパティを読み込む際、ドキュメントツリーを巡回しながら「カウンター」という仮想的な変数をメモリ上に保持します。
1. `counter-reset`: 指定されたスコープで、カウンターの値を初期値（デフォルトは0）に戻します。
2. `counter-increment`: その要素が現れるたびに、メモリ上の値を加算します。
3. `counters()`: ここが肝です。親要素から子要素まで、同じ名前のカウンターが連鎖している場合、CSSはそれらを配列のようにスタックとして保持します。`counters(section, “.”)` を呼ぶと、ブラウザはスタックを遡り、親の番号と子の番号をドットで連結して文字列として出力してくれるのです。
—
実務で「ハマる」ポイントと回避策
現場でこの機能を扱う際、いくつか注意すべき「沼」があります。
1. 番号の装飾とアクセシビリティ
`::before` 擬似要素で番号を表示すると、スクリーンリーダーによっては読み上げが不安定になる場合があります。しかし、`ol` 要素自体を使うことで、セマンティクス（意味論的構造）は保たれます。もしSEOやアクセシビリティを極限まで気にするなら、`aria-label`を活用するなど、構造と見た目のバランスを慎重に判断してください。
2. リストの途中で番号を飛ばしたい場合
「特定の項目だけ番号を飛ばしたい」といった要件が来た場合、`counter-increment` に数値を与えることで調整可能です。
/ 2つずつカウントアップする例 /
li {
counter-increment: section 2;
}
—
まとめ：CSSは「文書」を理解するための言語である
`counters()` 関数を使うということは、単に見た目を整えること以上の意味を持ちます。それは、「この文書は階層構造を持っている」という情報を、CSSという言語を通してブラウザに正しく伝える行為です。
コードは書くことよりも「読まれること」の方が圧倒的に多い。だからこそ、トリッキーなJSで番号を生成するよりも、CSSの宣言的な記述で構造を表現する方が、後からコードを触るメンバーにとっても遥かに親切です。
「CSSだけでどこまでできるか」という探究心は、間違いなくあなたのフロントエンド開発の幅を広げます。ぜひ、次のプロジェクトのドキュメント作成などで活用してみてください。それでは、また現場でお会いしましょう。
コメント