CSSのカウンターで連番を自動ナンバリングする方法！
CSSのカウンターを使って連番の数字を自動ナンバリングする方法をサンプルコード付きで解説します。CSSのカウンターのテクニックをぜひ習得しましょう。
CSSのカウンターで連番を自動ナンバリングしたい
HTMLでは自動で数字の番号をナンバリングしたいときがあります。
例えば下記のサンプルコードのような、見出しの頭に連番の数字を付けて書く利用規約や、プライバシーポリシーなど少し固めの文章でよく利用される形式の場合です。
上記のサンプルコードでは1、2、3などナンバリングの数字を手動で書いています。もちろん数が少なければそれでも良いのですが、数が多い場合は大変な労力がかかります。
このような場合でCSSのカウンターで連番を発行して、自動ナンバリングすると便利です。
そこで今回はCSSのカウンターで連番で自動ナンバリングする方法を解説していきます。
CSSのカウンターで連番を自動ナンバリングする方法
準備（前提知識）
CSSでカウンターを利用するには
counter-resetプロパティcounter-incrementプロパティcounter関数
また現在のカウンターの値はcounter関数で取得が行なえます。
やり方
それでは実際にカウンターを作成してみましょう。下記のサンプルコードを見てみましょう。
上記のサンプルコードではHTML側からは頭の数字は完全に消え、全てCSSのカウンターを使って頭の数字を付与しています。
では上記のサンプルコードを順番に解説していきます。
カウンターを初期化
カウンターの初期化
body {
/* 見出しのカウンター */
counter-reset: heading-counter 0;
}
.section {
/* 段落のカウンター */
counter-reset: paragraph-counter 0;
}この部分でカウンターの初期化をしています。見出しのカウンターはページ全体で連番とししたいので、body要素のセレクタで初期化しています。
一方で段落のカウンターはセクション単位で初期化（次のセクションではまた1からスタート）したいので、.sectionのセレクタで初期化しています。
カウンターの値の取得と加算
カウンターの値の取得と加算
/* 見出しのスタイル */
.heading:before {
counter-increment: heading-counter 1;
content: "第" counter(heading-counter) "条";
}
/* 段落のスタイル */
.section p:before {
counter-increment: paragraph-counter 1;
content: counter(paragraph-counter) ".";
}カウンターの値を加算するにはcounter-incrementプロパティを使い、カウンター名と加算する値を渡します。今回は1つず加算しています。
counter関数では現在のカウンターの値を取得することが出来ます。取得したカウンターの値をbefore疑似要素のcontentに設定することで各要素の頭に連番の数字を付与することが出来ます。
CSSのカウンターに関する関連情報
CSSでカウンターの値が増えない問題は初めてCSSのカウンターを利用する際にはよく遭遇します。記述や文法ミスの場合もありますが、ブラウザ依存という場合もあります。
カウンターの値が増えないという方は下記を参考にしてみて下さい。
CSSのカウンターを使うと1位〜10位と順番に表示するいわゆるランキングが簡単に作成出来ます。
下記ではCSSのカウンターでランキングを作成する方法をサンプルコード付きで紹介しています。
