知っておくと便利！CSSだけで自動カウントする方法【CSSカウンタ】

おはようございます！社員Aです👩

今回は、CSSだけで自動カウント（CSSカウンタ）する方法をご紹介したいと思います。

「自動カウントはjsでしかできないのでは‥？」と思われるかもしれませんが、CSSでも簡単にできますのでこの機会にぜひ覚えてみましょう！

CSSの自動カウンタ（CSSカウンタ）ってなに？

そもそもCSSカウンタってなに？と思われるかもしれませんので、ご説明します！（笑）

CSS カウンターは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。

例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。

カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

引用：https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters

つまり、CSSだけを使って自動的に見出し番号を振ったりすることのできる機能です。

CSSセレクタ基本のルール

1. 親要素に「counter-reset: xxx;」を指定。（xxxの部分は任意）
2. 自動カウントしたい要素に「counter-increment:xxx」「content: counter(xxx);」を指定。

実際に上記ルールを適用してみました。

HTML

<div class="box">
	<h1>これは見出しです。</h1>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<h1>これは見出しです。</h1>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	<h1>これは見出しです。</h1>
	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

CSS

.box{
	width:500px;
	margin:50px auto 0 auto;
	counter-reset: num;
}
.box h1::before{
	counter-increment:num;
	content: counter(num);
}

表示

h1の疑似要素「:before」を使って簡単に見出しの前に自動カウントできました。

見出しではなくても、リストなどでも応用できそうです。

わざわざ数を数えながら入れ込みをする手間も減りますし、要素を入れ替えても番号順になるのでとても便利です！

自動カウントの開始する数を変更する

自動カウントの開始する数や、間隔も変更ができます。

例えば下記のようなシーンです。

• 5からカウントを始めたい
• 2ずつ飛ばしてカウントさせたい

HTMLは先程と同様のまま、CSSだけ変更します。

CSS

.box{
	width:500px;
	margin:50px auto 0 auto;
	counter-reset: num 5;
}
.box h1::before{
	counter-increment: num 2;
	content: counter(num);
}

.box要素に指定している「counter-reset」に、「num」と初期値である「5」を指定します。

そして、ナンバリングしたい要素には「counter-increment」に、「num」と飛ばしてカウントしたい「2」を指定します。

表示

このカスタマイズでナンバリングの幅がぐっと広がりました。様々な用途に合わせて使えそうです。

数字以外にも漢数字や白丸なども指定できる

CSSカウンタのデフォルトは数字ですが、こちらも指定することにより漢数字や白丸などに変更ができます。

CSS

.box{
	width:500px;
	margin:50px auto 0 auto;
	counter-reset: num;
}
.box h1::before{
	counter-increment: num;
	content: counter(num,cjk-ideographic);
}

「content」部分に、カンマで区切りを入れて指定します。

下記表にあるプロパティをいれていただくと、変更できます。