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

  • このエントリーをはてなブックマークに追加
counterを使って自動でナンバリングを付ける

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

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

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

単純な連番を表示させる

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

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

まず、連番を振る要素の親要素に「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);の部分を少し変更します。

例えばcontent: “STEP” counter(number);としてあげれば完成!
これで数字の前に「STEP」の文字を入れる事ができます。

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

今度は「第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 等)

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

  • このエントリーをはてなブックマークに追加

新潟県内地域別ホームページ制作実績

弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。
ホームページ制作・Webデザイン・インターネット戦略のご相談は、株式会社アテンドまで。

CONTACTお問い合わせ

ご相談やご質問、ご要望などございましたら、
お気軽にお問い合わせください。

TEL:0258-31-5005FAX:0258-37-7301