【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擬似要素に連番を表示させましたが、他の要素でも連番の表示は可能です。