CSSのcounter-incrementを使って簡単に自動で連番をつける方法

連番を動的に付けたいけど、どうやったら付けれるかを知りたい！

いくつか方法はありますが、今回は非常に便利なCSSプロパティであるcounter-incrementを紹介します。

counter-increment？counter-reset？って何？

counter-increment とcounter-resetについて解説していきます！

counter-incrementについて

counter-increment は、CSSのプロパティの一つであり、カウンター（counter）を操作するために使用されます。カウンターは、文書内の特定の要素の数を追跡するために使用されます。このプロパティは、::before や ::after などの疑似要素に対して適用され、カウンターの値をインクリメント（増加）させるために使用されます。

counter-increment プロパティは、次のような形式で使用されます：

counter-increment: counter-name value;

counter-resetについて

counter-reset プロパティは、CSSのカウンター（counter）をリセットまたは初期化するために使用されます。このプロパティは、カウンターの値をゼロまたは特定の値にリセットし、それ以降のカウンター値の計算に影響します。

counter-reset プロパティは次のような形式で使用されます：

counter-reset: counter-name value;

では、実際にどのような使い方をするのかをハンズオン形式でやっていきましょう！

counter-incrementで実際にカウントを増やしてみよう

今回は、5, 6, 7と増やすcounterを作ってみようと思います。

コピペしたい方に、先に答えを載せておきます！

<div class="counter-parent">
 <p class="counter-child">counter-parentの子要素（1番目）</p>
 <p class="counter-child">counter-parentの子要素（2番目）</p>
 <p class="counter-child">counter-parentの子要素（3番目）</p>
</div>

.counter-parent {
 counter-reset: number 4; /* 名前は任意（今回はnumber）、0でリセット（0は初期値）。*/
}
.counter-child::before {
 counter-increment: number 1; /* counter-resetの名前を指定、+1づつ増やす。*/
 content: counter(number) "."; /* 番号の後に、ドットを付ける場合に指定する。*/
 padding-right: 8px; /* ドットと文字に、間隔を空ける場合に指定する。*/
}

では、順番にやり方を見ていきましょう！

① カウントを増やしたい子要素にcounter-increment: number 1;を設定する

今回は、numberという名前を付けましたが、ここは任意なので、他の名前に変えてもらっても構いません。

5, 6, 7と増やす、つまり1ずつ増やしたいので、1を設定します。

② 親要素にcounter-reset: number 4; を設定する

なぜ、4を設定するかというと、今回5からスタートして1ずつ増やしたいので、4で初期化することで、4+1で5スタートになるわけです。

ここの数字は、-1のようにマイナスの値を取ることも可能です。

③ カウントを増やしたい子要素にcontent: counter(number) "."; を設定する。

この書き方をすることで、counterの後にドットを入れることができます。

ドット以外にも任意の文字列を入れることもできますよ。

See the Pen counter-incrementについて by レメ (@grozxntv-the-sasster) on CodePen.