【CSS】指定した要素に、カウンター番号（連番）を表示させる方法

今回は、CSSで指定した要素に、カウンター番号（連番）を表示させる例となります。

指定した要素にカウンター番号（連番）を表示させる例

今回の例では、ol内のli:before擬似要素に、連番を持つテキストを表示させます。表示させるテキストは、「第●項」とし、●の箇所を連番としています。

ol{
	list-style:none;
    counter-reset:order;
}
ol li:before{
	color:#F30;
	padding-right:10px;
	counter-increment:order;
	content:"第"counter(order)"項";
}

ソースコードの説明

指定した要素に連番を表示させるには以下の3つのプロパティを使用します。

counter-incrementプロパティ

counter-incrementプロパティは、適用した要素の連番の値を進めます。プロパティの値には「カウンター名」を指定します。カウンター名は、任意となり今回の例では、「order」としました。

contentプロパティ

連番を表示させるには、content:プロパティの値に、counter(カウンター名)を指定します。counter(カウンター名)の前後には、クォーテーションで囲むことで、テキストを出力することができます。今回の例では、content:プロパティの値は、「"第"counter(order)"項"」としました。

counter-resetプロパティ

counter-resetプロパティは、値に指定したカウンター名の連番をリセットします。連番を表示させるためには、counter-incrementプロパティを適用する前の要素に、counter-resetプロパティを適用させる必要があります。今回の例では、ol要素に、counter-resetプロパティを適用しています。

ol要素のlist-style-typeプロパティとの違い

ol要素で、list-style-typeプロパティを使用すれば、連番を与えることができますが、今回の例を使用すると、連番の前後にテキストを加えたり、その連番を含むテキストに、独自のCSSを設定することも出来ます。

今回の例では、ol要素のli:before擬似要素に連番を表示させましたが、他の要素でも連番の表示は可能です。