counterを使って自動ナンバリングを付ける

list-styleでもできるけど使いにくい！そんなアナタへ

リスト表示にした際、1から順に先頭に数字を設けるデザインをする事がありますが、list-styleで数字を振っていくと、なんだか装飾しにくくてイライラする事がありませんか？私はよくなります・・・
また、ul・li以外でナンバリングを付けたい！なんて事もあるのではないでしょうか？

そんな時には:beforeなどの疑似要素を使ってつけていくと実現できます！
今回はそんなコーディングに関するお話です。

単純な連番を表示させる

それでは早速、1.2.3.4….と単純な連番を表示させてみましょう。
ul要素に連番で番号を振るパターンでご紹介します。

まず、連番を振る要素の親要素に「counter-reset: number 0;」を付け、カウンタを0にセットします。

これを省略すると、0から始まる連番になります。1を付ければ2から始まるようになるので、場合によって使い分けていきましょう。
続いて連番を振る要素の疑似要素に「counter-increment: number 1;」を付けて増加させる数字を指定します。
最後に「content: counter(number);」を書き込めばこれでOK！
簡単ですね。
これでli要素を5個書き込んだら、1～5の数字がそれぞれに割り振られるという動作になります。

ul・li要素で紹介しましたが、書き方次第ではどの要素にも付ける事ができます。
例えばulにしてある部分をbodyに、liにしてある部分をh1にすると、body要素内にあるh1を連続して書くと、先頭に数字が割り振られます。試してみてくださいね。

連番の前に任意の文字を入力する

連番を振る事ができましたが、STEP1など、数字の前に文字を入れたい！という場合もでてくるのではないでしょうか。
そんな時はcontent: counter(number);の部分を少し変更します。

連番の後ろにも文字を入れたい

今度は「第1回」みたいに前後に文字を入れたい場合についてです。
前に入れる方法は上記の通りです。これを少し改造して、content: “第” counter(number) “回”;
これだけでOK！これまた簡単ですね。

洋数字以外を入れるには

list-styleでは1.2.3.などの洋数字の他に、様々な形式でナンバリングする事ができますね。
でも今回紹介した方法だと、できないのでは？と思うでしょう。
ですが安心してください。大丈夫です。

「content: counter(number);」と記載していた場所を、
「content: counter(number, cjk-ideographic);」としてみてください。
漢数字になりましたね！こうしたように、表記を書き換えれば対応できます！
ですが何でもできる！という物ではないので、その点には注意してください。

ちなみに
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 等）

でそれぞれに変更可能です。ぜひお試しあれ。