Roroa.

こんにちはkazukiです。
今回は、忘れがち！でも覚えておきたいcssの自動ナンバリングの方法をメモしておきたいと思います。

基本的にナンバリングはolタグ（ordered list）のデフォルトで

1. テキスト〜
2. テキスト〜
3. テキスト〜

みたいになっているのですが、もう少しデザインを変えたいなどで、デフォルトスタイルを消しナンバリングのcssで装飾するということがあります。
そんな時に、自動ナンバリングが便利です！
（olタグ以外でも使えますよ）

ナンバリング方法

自動ナンバリングの方法ですが、htmlは仮でこんな感じでシンプルなものとします。

<ol>
<li>テキスト〜</li>
<li>テキスト〜</li>
<li>テキスト〜</li>
</ol>

次にcssですが、このようになります。

ol {
	counter-reset: number 0;
}
ol li:before {
	counter-increment: number 1;
	content: counter(number);
}

これで自動ナンバリングができます！

cssの解説

cssについて解説いたします。
流れとしては

• 数字が入る入れ物を用意し、カウンターをセット
• 該当のタグがあれば数字を足す
• その数字を表示する

という感じです。
ちなみに「number」とありますが、こちらは入れ物の名前なので「numbers」でも「suji」でもなんでも大丈夫です。（なんでもと言いましたが、、日本語はやめておいた方がいいかもです）

counter-reset: number 0;

counter-resetはnumberという入れ物にカウンターを0でセットするという役割をしています。
0でセットするというところが大事でして、ここではolに対してcounter-resetをしています。

ということはolが出てくるたびにnumberに入れた数字が0になるということです。

counter-increment: number 1;

counter-incrementではnumberに入れた数字を1づつ足していくということをしています。
ここで設定していることを正確に言えば、olのliが出てきたら1を足すです。

ここの数字は「2」にすれば2づつ足していきますし、「3」にすれば3づつ足していきますよ。便利ですね。

content: counter(number);

ここはliに:beforeを使い擬似要素を生成しliの先頭に置いています。
そして、生成した擬似要素にcounterでnumber内に入れていた数字を表示しています。

これでolの各liの先頭に数字が表示させることができるんです。便利です！

数字の表示形式を変えられる

先ほど設定していた数字を「漢数字」や「ひらがな」「アルファベット」などにも変えることができます。

プロパティ例：

• cjk-ideographic : 漢数字
• hiragana : ひらがな（あいうえお順）
• lower-alpha : 小文字のアルファベット（abcde〜）

使用例：漢数字

ol li:before {
	counter-increment: number 1;
	content: counter(number, cjk-ideographic);
}