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

Pocket

デザインヒント ブログ
mailboxes-1838667_640

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

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

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

counter-incrementの設定方法

サンプルとして3名のお名前を記述(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タグの1番目と2番目の文字サイズと太さを変更しています)

.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です。使い道はあまり多くはなさそうですが…^^

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

Sponserd Links

Midori Design Works © 2016 All Rights Reserved.

Midori Design Works ミドリデザインワークス