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

2015年09月23日 12時21分

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

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

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

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

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

// 数字のエリア
.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;}

これで実行！