【css】counterを利用した自動ナンバリングのあれこれ

ちょこちょこCSSのcounterを使用する機会があるのですが、これまでは割と狭い範囲（基本的な方法）でしか使用してなかったので
応用とそのプロパティをせっかくなのでまとめておこうと思います。
みなさんの参考になれば幸いです！

カウントする値の親となる要素（上記でいうとul）に「countercounter-reset」を設定します。
countercounter-resetの数字は初期値で、省略すると『0』です。ここでカウントする値を初期化をします。

「counter-increment」カウントの増加数をセットし（つまり、「1」をセットすると「1」ずつ増加）、「content」で表示形式を指定します。

個人的にはすごくありがたい機能。
これを知るまではJSでなんとかしようとしてました…。
2桁になると自動的に0はつかなくなります！

基本的な方法と違うのは「decimal-leading-zero」を設定する必要があることくらいですね！

before要素のcontentの前に”（ダブルコーテーション）で日テキストをいれると入ります！
これもなかなか便利★後ろにも同じ方法でテキストをいれることができますよ~

■armenian
アルメニア数字

■circle
白丸

■cjk-ideographic
漢数字

■decimal
算用数字 olデフォルト値

■decimal-leading-zero
先頭に0をつけた算用数字 (01, 02, 03, 等)

■georgian
グルジア数字

■hebrew
ヘブライ数字

■hiragana
ひらがな – あいうえお順

■hiragana-iroha
ひらがな – いろは順

■inherit
listStyleType プロパティの値は親要素から継承することを指定する

■katakana
カタカナ – アイウエオ順

■katakana-iroha
カタカナ – イロハ順

■lower-alpha
小文字のアルファベット (a, b, c, d, e 等)

■lower-greek
小文字のギリシャ文字

■lower-latin
小文字のアルファベット (a, b, c, d, e 等)

■lower-roman
T小文字のローマ数字 (i, ii, iii, iv, v 等)

■upper-alpha
大文字のアルファベット (A, B, C, D, E 等)

■upper-latin
大文字のアルファベット (A, B, C, D, E 等)

■upper-roman
大文字のローマ数字 (I, II, III, IV, V 等)

調べてみると幅広いプロパティ値！笑
結構いろんなところで使えそうです♪みなさんもぜひお試しあれ(*’ω’*)

Creator Note