CSSのcontentプロパティでカウンターを使う

CSSのcontentプロパティで、見出しやリストに連番の数字を表示する方法を試してみます。

サンプルコード

以下のようなリストに連番を設定してみます。

<ol class="sample">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

カウンターを使うにはcounter-resetとcounter-incrementを設定して、contentの中でcounter()またはcounters()関数を使用します。

body {
	counter-reset: count;
}
.sample li::before {
	counter-increment: count;
	content: '('counter(count)') ';
}

counter-resetは変数(今回の場合はcount)を初期化するプロパティ、counter-incrementは変数の値を増減させるプロパティになります。
リストに連番を表示するデモページ

ページ内全体で連番を設定したい場合はこれでも問題ありませんが、複数のリストに別々に連番を設定したい場合はこの設定方法だとうまくいきません。

<ol class="sample">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

<h2>別のリスト</h2>
<ol class="sample">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

2つ目のリストの番号が1つ目のリストの続きからになりました。
複数のリストにした場合のデモページ

counter-resetを使ってリセットする位置を変更することで対応できます。

.sample {
	counter-reset: count;
}
.sample li::before {
	counter-increment: count;
	content: '('counter(count)') ';
}

これでリスト毎に連番を設定することができました。
複数のリストに対応した場合のデモページ

連番の初期値を変更することもできます。

.sample {
	counter-reset: count 2;
}
.sample li::before {
	counter-increment: count;
	content: '('counter(count)') ';
}

counter-resetの変数の後に数値を指定することで、初期値を指定できます。
今回の場合は2を指定していますが、カウンターが表示されるタイミングで1プラスされるので最初の数字は3になります。
連番の初期値を変更するデモページ

連番の増える値を1以外にすることもできます。
2つずつ増えるようにしてみます。

.sample {
	counter-reset: count;
}
.sample li::before {
	counter-increment: count 2;
	content: '('counter(count)') ';
}

counter-incrementの変数の後に数値を指定することで、増減する値を指定できます。
連番の増減値を変更するデモページ

カウンターを入れ子にすることもできます。

<ol class="sample">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ol>

<ol class="sample">
	<li>リスト1</li>
	<li>リスト2
		<ol class="sample">
			<li>リスト1</li>
			<li>リスト2</li>
			<li>リスト3
				<ol class="sample">
					<li>リスト1</li>
					<li>リスト2</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>リスト3</li>
</ol>

入れ子にする場合はcounters()関数を使用します。

.sample {
	counter-reset: count;
}
.sample li::before {
	counter-increment: count;
	content: '('counters(count, '.')') ';
}

counters()の第二引数で連番同士をつなぐ文字列を指定しています。
連番を入れ子にするデモページ

【参考サイト】

• CSS カウンターの使用 – 開発者ガイド | MDN
• counter-reset – CSS: カスケーディングスタイルシート | MDN
• counter-increment – CSS: カスケーディングスタイルシート | MDN