counter-incrementプロパティを使ってリストに連番を付ける

連番を付けたいときに使用するol要素。でも数字の部分を自由に装飾したい！というときのためのメモ。

ol の記述

まずは通常のolリストの記述。

<ol>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ol>

項目
項目
項目
項目

とまあこんな感じです。ここの数字の部分を装飾したい。

counterプロパティを使って連番を表示する

ol で出力される連番を非表示に

せっかくの連番ですが、いったん非表示にしちゃいます。

ol{
  counter-reset : number;
  padding-left : 0;
  margin : 0;
}
ol li{
  list-style-type : none;
}

まず ol のcounter-reset : number;のところで、カウンターのリセットをします。numberというカウンターを使いますよ、という感じですので、ここのところには好きな名前を付けてください。カウンターは0になります。ついでにpaddingとmarginも0にして字下げをリセットしておきます。

続いて li 要素ではlist-style-type : none;で元々のナンバリングを非表示にしておきます。

counter プロパティを使用して連番を取得する

続いてリストでカウンターの処理と表示をします。

li::before {
  counter-increment : number;
  content : '第'counter(number)'章';
  margin-right : 5px;
}

カウンターはリスト(li)のbefore要素に出力します。
counter-increment: number;でカウンターの数字を1進めます。
content : counter(number);でカウンターの数字を表示します。
ここを'第'counter(number)'章';とすることで「第1章」のように表示されるようになります。

項目
項目
項目
項目

ここまでがカウンターの使い方。

あとはli::beforeを好きなようにCSSで装飾すればOKです。

リストを入れ子にするときは

このカウンターはさらに入れ子でも使えます。

See the Pen counterプロパティ（入れ子） by Leaf (@studioleaf) on CodePen.

content: counters(number, "-") ". ";のところでcountersというプロパティを使用しています。これだけで入れ子にも対応できるのはすごいですね！

さらにリストだけじゃなくて他の要素のカウンターとしても使用できます。ただしcounter()自体はcontentプロパティにしか出力できないようです。変数みたいに使えたら便利なんですけどそういうのはjsとかでやりなさいってことですね～。