婚活LABより、ブライダルネットの期間限定クーポン配布中!!

CSSだけで疑似要素に1番簡単に連番を表示する方法。

CSSだけで疑似要素に1番簡単に連番を表示する方法。

記事のランキング順位表示やリスト作成時に連番を表示したいとき、1つの方法としてolタグを使用するということが挙げられます。
しかし、olタグでは、連番部分の装飾をCSSで自由に指定出来ず、思うようなスタイルが作れません。

counter-incrementプロパティの概要

counter-incrementプロパテでは、値にカウンタ名を記述し、定義した要素が出現するたびに数をインクリメント(増加)した値をカウンタ名に格納します。デフォルトでは1ずつ数を増加させます。

カウンタ名に格納した値を表示するには、擬似要素である::before、または::afterで使用するcontentプロパティの値、counter()関数を使用して表示します。

counter-incrementプロパティをエラーなく使用するには任意の親要素にcounter-resetプロパティを記述して下さい。
counter-resetプロパティを記述してカウンタ名を初期化してやらないと上手くカウンタが増えていかない等のエラーとなります。

counter-resetは値にカウンタ名を記述します。

例)カウンタ名をnumとした場合
 counter-reset:num;

※カウンタ名の後に半角スペースと任意の値を記述した場合、その値に初期化されます。

言葉だけでは中々理解が深まらないのでサンプルコードを交えながら以下で解説していきます。

counter-incrementプロパティ使用例

まずは実際のブラウザ表示サンプルを確認します。

サンプルイメージ

  • 一番目のリスト
  • 二番目のリスト
  • 三番目のリスト

わかりやすく青で色付けされ、白字のところがcounter-incrementでカウントした値を表示した部分です。
疑要素を使用しているので、後はCSSにてサンプルの様にお好きなスタイルを適用できます。
では、上記のサンプルイメージを解説します。

HTMLサンプルコード

<ul class="sample">
	<li>一番目のリスト</li>
	<li>二番目のリスト</li>
	<li>三番目のリスト</li>
</ul>

HTMLはulタグを用いた一般的なリストの作成なので解説は必要ないかと思います。
ulのクラス名はsampleとしています。

CSSサンプルコード

.sample{
 counter-reset: num;
}

.sample li::before{
 counter-increment: num;
 content: counter(num)".";
 background-color: blue;
 color: white;
}

liの数だけ値を進めたいので、liの擬似要素内にcounter-incrementプロパティにてカウンタ名『num』を指定しています。このプロパティの値は任意の文字列を指定して頂いて構いません。。半角スペースの後に整数を記述した場合、初期値から記述した整数分数を勧めます。記述しない場合は1ずつ数を進める為、殆どの場合は記述が必要ないかと思います。

次に、counter-incrementで指定したカウンタ名を初期化する為、counter-resetプロパティをli要素の親となるol要素に記述しました。

最後に、連番を表示したい擬似要素にcontentプロパティの値、counter()を使用してnumの値を戻しています。

擬似要素で使用するcontentプロパティでは、文字列をそのまま表示する””で囲ったものとcounter()を併用して使用することができます。

例) content:counter(num)”位”;

上の例ではnumの値の後ろに『位』という文字が表示される。ランキングのリストなどに利用できる。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!