CSS3で要素のカウントが出来るんだ・・・「counter-increment」がランキング作るのに便利

いままでランキングとかにカウント数(1位、2位、3位・・・)を振るときはjQueryやら手動やらでやってたんですが、なんとCSS3で要素のカウント取れるやつがありましたよ・・・知らんだ。

要素のカウントが取れる「counter-increment」

カウントを取るには「counter-increment」というプロパティで可能らしい。詳しい内容とサンプルは以下リファレンスで。

counter-increment・・・・・要素の連番(カウンタ)の値を進める

これを使えばいままで「WordPress Popular Posts」で出力していたランキングの順位部分を自動で出力出来る・・・素晴らしい。

1

というのも僕はこのブログのこのランキングの部分をこんなコードで出力していたのだ。

// 数字のエリア
.popular_posts li .rank{
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px 6px;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000000;
	}

// 数字のエリアに数値を入れる
.popular_posts li:nth-child(1) .rank{background-color: #F9C801;}
.popular_posts li:nth-child(1) span:before{content:"1";}
.popular_posts li:nth-child(2) .rank{background-color: #B8B6BB;}
.popular_posts li:nth-child(2) span:before{content:"2";}
.popular_posts li:nth-child(3) .rank{background-color: #D37559;}
.popular_posts li:nth-child(3) span:before{content:"3";}
.popular_posts li:nth-child(4) span:before{content:"4";}
.popular_posts li:nth-child(5) span:before{content:"5";}
.popular_posts li:nth-child(6) span:before{content:"6";}
.popular_posts li:nth-child(7) span:before{content:"7";}
.popular_posts li:nth-child(8) span:before{content:"8";}
.popular_posts li:nth-child(9) span:before{content:"9";}
.popular_posts li:nth-child(10) span:before{content:"10";}

まぁ、10個から変える事無いし、いいか・・・みたいなね。まぁ早速このcounter-incrementを使って改造してみた。それがこちら。

.popular_posts li .rank{
	position: absolute;
	top: 0;
	left: 0;
	padding: 1px 6px;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #000000;
	}

.popular_posts li .rank:before{
	counter-increment: rank;
	content: counter(rank);
}

.popular_posts li:nth-child(1) .rank{background-color: #F9C801;}
.popular_posts li:nth-child(2) .rank{background-color: #B8B6BB;}
.popular_posts li:nth-child(3) .rank{background-color: #D37559;}

これで実行!

2

はい、増えないよっと

数値が増えんぞ・・・なんでや。

この後いろいろと試してみました。擬似要素に入れたら取得出来ないんじゃね?と思って.popular_posts liのとこにcounter-increment: rank;を移してみたら出来た!

しかしこれ結構いろんなとこで擬似要素に入れてるサンプルが有るので他に原因が有りそうな気がした。ので、もうちょい調べてみたらどうやらCSSでカウンタを使用する際には最初にcounter-resetで初期化してやらなければいけなかったようだ。

CSS カウンタの利用 / MDN

というわけでとりあえずbodyのとこにcounter-reset: rank;を追加して初期化してやったら上手いことカウンターされて数値が出ました!良かった良かった。


いまのとここのCSSカウンタはランキングの順位ぐらいにしか使いドコロが思い付かないが、別に1ずつじゃなくて設定によっては2ずつとかも増やせるみたいなので、他にも使い道が有るかもしれない。

とりあえず、CSSカウンタcounter-incrementで数値が増えない場合はcounter-resetがキチンとされているか確認した方が良さそうだ。

SPONCERD

コメントはまだありません


※承認後に反映されます