2013/10/12

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。
こうしたとき、以前まででしたら、見出し1つ1つに連番をつけていたのですが、10でも結構面倒なのに、100なんてあった日には、とてもではありませんが、つける気にもならず、ついつい省略していました。
でも、よくよく考えてみると、自動で連番をつける方法がありました。
CSSのcontent：counterプロパティを利用する方法です。

contentプロパティを利用する

利用するのはcontentプロパティです。
contentプロパティは、挿入したいコンテンツを指定でき、::beforeまたは::afterセレクタで挿入先を指定することが可能です。
contentプロパティには、文字列、画像、引用符、そして、この記事で紹介する「カウンタ」を挿入することが可能です。

content：counterを利用して見出しに自動で連番をふる

当ブログではh2で、連番をつけるようにしています。
連番をつけるには、content：counterを利用します。
具体的には以下の様な方法で連番をフルことが可能。

[css]
h2::before {
content: counter(mycount);
margin-right: 10px; /*数字のあとにアキを挿入*/
}
h2 {
counter-increment: mycount;
}
[/css]

mycountというカウンター名をつけて、counter-incrementプロパティで、h2部分に連番をふるようにしています。

さまざまな種類のカウンターを挿入できる

挿入できるのは数字だけではありません。

アルファベット大文字だったら以下のようになります。
[css]
content: counter(mycount, upper-alpha);
[/css]

アルファベット小文字だったら以下のようになります。
[css]
content: counter(mycount, lower-alpha);
[/css]

ローマ数字大文字（I,II..）だったら以下のようになります。
[css]
content: counter(mycount, upper-roman);
[/css]

ローマ数字小文字（i,ii…）だったら以下のようになります。
[css]
content: counter(mycount, lower-roman);
[/css]

記事を書くときに、少しでも楽になれば幸いです。

Sponsored by

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。