Counters (CSS)
CSS alone で自動的な連番機能を実現できる強力な仕組みです。counter-reset でカウンターを初期化し、counter-increment で加算、counter() や counters() で値を表示します。ネストされたカウンター（1.1、1.2 のような章番号）も counters() 関数で実現可能です。技術文書や法的文書の自動番号付けに特に有用です。
概要
CSS alone で自動的な連番機能を実現できる強力な仕組みです。counter-reset でカウンターを初期化し、counter-increment で加算、counter() や counters() で値を表示します。ネストされたカウンター（1.1、1.2 のような章番号）も counters() 関数で実現可能です。技術文書や法的文書の自動番号付けに特に有用です。
対応ブラウザ
デスクトップ
Chrome 2+
Edge 12+
Safari 3+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 25+
基本構文
CSS
body {
counter-reset: chapter;
}
h2::before {
counter-increment: chapter;
content: '第' counter(chapter) '章 ';
}実務での使いどころ
-
技術文書の自動章番号付け
見出し要素にCSSカウンターを適用し、章・節の番号を自動的に付与・更新できます。コンテンツの追加・削除時も自動的に再番号付けされます。
注意点
- CSSカウンターはDOMの順序に基づいて計算されるため、要素の視覚的な並び替え（order プロパティ等）とは一致しない場合があります。
アクセシビリティ
- CSSカウンターで生成された番号はスクリーンリーダーに読み上げられることがあります。HTMLの ol/li 要素との重複した番号付けが発生しないよう注意してください。