li以外の要素にcssで連番をつける”counter-increment” の設定

こんにちは。ミドリデザインワークスのミウラです。

ホームページで連番をつけたい」となると「リストスタイル（ul,li）」を思い浮かべますが、css3では「counter-increment」というスタイルを使用することで、自分の設定した要素に対して連番を振ることが出来ます。

今回はその方法をご紹介いたします。

counter-incrementの設定方法

サンプルとして３名のお名前を記述（Pタグ）し、クラス名「test1」のdivタグで囲みました。このPタグに連番を振ってみたいと思います。

設定はシンプルです。

-- htmlに記述
<div class="test1">
  <p>サイトウさん</p>
  <p>タナカさん</p>
  <p>コンドーさん</p>
</div>

-- cssに記述
.test1 p:before{
counter-increment: count1;
content: counters(count1,".") "";
}

このようにtest1のクラスに対して「counter-increment」の設定をします。

counter-increment:　には、任意のカウンター名を設定してください。（今回はtest1）

content: counters:　には先に決めたカウンター名を単位を設定します。（今回は単位の設定はしていません）

結果はこちら

See the Pen GNzmEK by oje-aje (@oje-aje) on CodePen.

このように、簡単な設定で好きな要素に連番を振っていくことが可能です。

たまに上手く連番が付与されないときもあります。

そんなときはbodyタグにリセットする記述を追加してあげてください。上手く行くと思います。

body{counter-reset:count1;}

先述の設定に「位」「等賞」「番」「本」などの単位を付けることが出来ます。例として「等賞」を付けてみます。
※読みやすいように「等賞」の後ろに全角スペースを入れました。

.test1 p:before{
counter-increment: count1;
content: counters(count1,".") "等賞　";
}

結果はこちら

See the Pen woNdPG by oje-aje (@oje-aje) on CodePen.

さらに疑似クラスnth-chaild(n)を使用してスタイルを付け足すとこんな表現も出来ます。（Pタグの１番目と２番目の文字サイズと太さを変更しています）

.test1 p:nth-child(1){
   font-size:30px;
   font-weight:bold;
   }

.test1 p:nth-child(2){
   font-size:25px;
 }

結果はこちら

See the Pen aBXWVa by oje-aje (@oje-aje) on CodePen.

以上となります。簡単な設定でリストスタイル以外にも連番が振れるというありがたいcssです。使い道はあまり多くはなさそうですが…^^

箇条書きで列数の多い内容などを、あとから修正するというときに便利かもしれませんね。また、リストスタイルで作成したときに、予め設定されているリストスタイルの装飾などが継承されるというわずらわしさがある場合にも、この方法ならシンプルに設定できるので便利かも！しれません。