Webサイト制作時に利用規約などやたらとolタグを利用する場面で、CSSカウンターを使って番号を括弧付きにする方法をご紹介します。

CSSカウンターとは？

要素に対して任意の文字列でカウンターを設定し、その要素が出現する度にカウンターを1つ進めます。IE8以降と全てのモダンブラウザで利用できます。

Can I use CSS Counters

使うCSSは以下の3つです。

• counter-reset: cnt;
• counter-increment: cnt;
• content: counter(cnt);

（cntは任意の文字列）

counter-reset: cnt

counter-resetを要素に設定するとプロパティ値に設定した文字列のカウンターを初期化します。この要素が出現するたびにカウンターは初期化されます。

counter-increment: cnt

counter-increment を要素に設定するとプロパティ値に設定した文字列のカウンターが紐付けられます。この要素が出現するたびにカウンターは1つ進みます。

content: counter(cnt)

contentプロパティにcounterを設定することにより、現在のカウント数が表示されます。

括弧付きol（オーダーリスト）を作る

sampleクラスに対してcounter-resetを設定します。この要素が出現する度にカウンターは0に戻ります。今回はol要素に設定しているので、list-style-type: none で標準のリストスタイルを非表示にしています。

liタグが出現する度にカウンターを1つ進みます。

実際の数値はliタグのbefore疑似要素内にcounterプロパティを使って表示させます。このとき、カウンターの前後に括弧を配置しています。

HTML

<ol class="sample">
    <li>利用規約　A</li>
    <li>利用規約 B</li>
    <li>利用規約 C</li>
</ol>
<ol class="sample">
    <li>利用規約 D</li>
    <li>利用規約 E</li>
    <li>利用規約 F</li>
</ol>

CSS

.sample {
    list-style-type: none;
    counter-reset: cnt;
}
.sample li {
    counter-increment: cnt;
}
.sample li::before {
    content: "（" counter(cnt) ")"
}

結果

1. 利用規約 A
2. 利用規約 B
3. 利用規約 C

1. 利用規約 D
2. 利用規約 E
3. 利用規約 F