CSSで連番をカウントして表示させる

コーディングする際に、「サービスの特徴」や「メリット」、はたまた「よくある質問」など、連番を表示させるデザインはかなり多いと思います。

そんなとき、どうやってコーディングしていますか。

リストタグ内などに直接テキストとして番号を書くのもよいですが、面倒なのでCSSで自動的にカウントして連番を振るやり方をご紹介します。

手順は2つだけなのでカンタンです。

難しく考えずに次の2ステップを押さえればすぐに使えます。

１. 入れたい要素たちを囲む要素にリセットするためのプロパティを入れる

「number」の部分は変数になるので、任意の文字列を入れてください。
ちなみに、STEP2にも同じ変数名を使います。

counter-reset: number 0;

例えば以下のような場合は、ulタグに上記をあてます。

<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
<li>リストアイテム4</li>
<li>リストアイテム5</li>
</ul>

２. 入れたい要素（たいてい疑似要素）に下記設定

表示したい箇所に以下を記述します。
疑似要素に表示させることが多いと思いますので、ここでは疑似要素を指定しているという前提でcontentに表示する記述をしています。（2行目のことです。）

「number」の部分はSTEP1で指定した文字列と合わせてください。
紐付けるイメージですね。

counter-increment: number 1;      /* number カウンタの増加数をセット */
7
content: counter(number) " ";      /* 表示形式を指定 */

これでカウント用の特別な記述は完了したので、position:absoluteなど疑似要素のお決まりのプロパティとともに位置やサイズを調整すればOKです。

複数カウントが必要な場合（例えば、「サービスのメリット」でも、「サービスの特徴」でもカウントしたいとなった際）は、変数名を別々にするのを忘れないようにしてくださいね。

前々からあるプロパティですが、知ったときは便利〜！となりました。

もっと便利なプロパティを知って効率化していきたいですね。