はじめに
- リスト要素に連番を表示したい！でもhtmlに直接1とか2とか書くのは嫌だな～
- よく利用規約とかの見出し先頭に数字で連番振るけど、手動でやるのはけっこう手間だな～
- 標準のlist-styleって芋くない？やっぱ疑似要素で番号振るしかないよね～
こんなシチュエーション、よくありますよね。私はかなりよくあります。
そんな時、CSSのカウンター関数(counter)を使うと、::beforeなどの疑似要素を使って簡単に自動で番号を表示！しかもいい感じに！！実装できます。
今回はそんなカウンター関数の使い方についてご紹介します。
ちなみに
私はカウンター関数の存在をわりと最近知りました。でもCSS2の頃から存在していたらしいです。えっ？
それまではどうやってたかというと、例えばol要素のliに番号を振る時なら
ol li:nth-of-type(1)::before{ content: "1"; }
ol li:nth-of-type(2)::before{ content: "2"; }
ol li:nth-of-type(3)::before{ content: "3"; }
ol li:nth-of-type(4)::before{ content: "4"; }
ol li:nth-of-type(5)::before{ content: "5"; }............ダルすぎて具合が悪くなってきましたね。
しかもこの書き方だとli要素を減らしたときにCSSも書き換えなければいけません。最アンド悪。
カウンター関数は自動で対象の要素数を数えそれに応じて番号を振ってくれるハイスペック彼氏なのでそんな心配もありません！
こんなダルすぎる書き方をしていたのは私だけで十分なので、これからはカウンター関数の力を借りていい感じに番号を振っちゃいましょう。
基本的な使い方：ol要素でリストに番号を振る
まずはこんな感じの基本に忠実なol要素を作成し、liに番号を振ってみます。
<ol>
<li>い～ち</li>
<li>に～い</li>
<li>さんまの</li>
<li>しっぽ</li>
<li>ごりらの</li>
<li>ろっこつ</li>
</ol>htmlを作成したらあとはCSSを書くだけです。
ちょこっと手順があるので下記を参考にどうぞ。
親要素にcounter-resetを記述して値を初期化
今回はol要素が親要素にあたるので、ここにcounter-resetを記述しましょう。
counter-resetの値は"listnum"としましたが、任意の文字列でOKなのでわかりやすくしておくといいですね。
ただし、グローバル値である"none"、"inherit"、"initial"、"revert"、"unset"は使用できないので注意。
また標準のlist-styleは使用しないので、list-style: noneで消えてもらいましょう。
ol{
counter-reset: listnum; /* カウンターをリセット */
list-style: none; /* 標準のスタイルは消す */
}番号を振りたい要素にcounter-incrementを記述し、contentで番号を表示
li要素のbeforeに番号を表示したいので、下記のように記述します。
counter-incrementの値には先程ol要素のcounter-resetでセットした文字列を入れましょう。今回は"listnum"ですね。
あとはcontentにcounter(セットした文字列)を記述するだけ！
ol{
counter-reset: listnum; /* カウンターをリセット */
list-style: none; /* 標準のスタイルは消す */
}
ol li::before{
counter-increment: listnum; /* counter-resetと同じ文字列 */
content: counter(listnum); /* カウントした数に応じて番号を表示 */
}出力結果
こうなります。ちゃんと番号が表示されていますね。
こんな感じに自動で番号を振り直してくれています。
番号をいい感じに装飾する
でもこれだけだとちょっと味気ないので、番号の後ろにピリオドを追加してみましょう。
ついでに色も付けてfont-family変えてサイズ大きくして太くして余白入れて...
ol li::before{
counter-increment: listnum;
content: counter(listnum) "."; /* 半角スペースを入れて""の中にピリオドを追加 */
padding-right: 15px;
color: #1e8ec8;
vertical-align: middle;
font-size: 24px;
font-family: roboto;
font-weight: bold;
}
なんかいい感じになりましたね。ヤッター！
番号の部分は疑似要素なので丸い装飾の中に番号を表示したり、position:absolute;で番号だけ位置を変えたり...いろいろできると思います。
応用編
ここから下はちょっと応用っぽい使い方をご紹介します。
<h2>などの見出しタグに連番を振る
とは言っても基本的な考え方はolの時と一緒で、
- 親要素にcounter-resetを記述して値を初期化
- 番号を振りたい要素(<h2>など)にcounter-incrementを記述
これさえ守っていれば大丈夫です。
html
<div>
<h1>観光ポイントをチェック！</h1>
<h2>めちゃくちゃすごい紅葉</h2>
<p>眼前にめちゃくちゃすごい紅葉が広がり、すごいです。</p>
<h2>綺麗すぎるライトアップ</h2>
<p>ライトアップが綺麗すぎて、ヤバいです。</p>
<h2>とってもおいしい団子</h2>
<p>土産処で売ってる団子がとってもおいしいです。</p>
</div>CSS
親要素がdivなので、divにcounter-resetを記述します。
h2に番号を表示したいのでh2の::beforeにcounter-incrementや装飾を入れましょう。
今回はcontentの書き方を工夫して、数字の前に「POINT」の文字を入れてみました。
div{
counter-reset: titlenum;
}
h2::before{
counter-increment: titlenum; /* counter-resetと同じ文字列 */
content: "POINT " counter(titlenum);
/* ここから下は装飾です */
margin-right: 20px;
padding: 10px 20px;
display: inline-block;
border-radius: 10px;
color: #fff;
font-family: roboto;
font-size: 20px;
background: #fa754b;
}出力結果
漢数字やアルファベット等の形式で連番を振る
上の例ではオーソドックスな数字で連番を振りましたが、数字以外にも色々な形式があります。
下記に使う頻度が高そうなもの、もしかしたら使うかもしれない？ものを紹介していきます。
指定のやり方はこんな感じです。
ol li::before{
content: counter(listnum, 表示したい形式); /* counterにセットした値のあとにコンマを入れて形式を指定 */
}decimal(初期値)
数字を表示します。(1、2、3、4、5...)
初期値なので、記述は省略できます。
ol li::before{
/* content: counter(listnum);のみでもOK */
content: counter(listnum, decimal);
}decimal-leading-zero
ゼロパディングで数字を表示します。(01、02、03、04、05...)
ol li::before{
content: counter(listnum, decimal-leading-zero);
}cjk-ideographic
漢数字を表示します。(一、二、三、四、五...)
ol li::before{
content: counter(listnum, cjk-ideographic);
}upper-alpha
大文字のアルファベットを表示します。(A、B、C、D、E...)
ol li::before{
content: counter(listnum, upper-alpha);
}lower-alpha
小文字のアルファベットを表示します。(a、b、c、d、e...)
ol li::before{
content: counter(listnum, lower-alpha);
}upper-roman
大文字のローマ数字を表示します。(Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ...)
ol li::before{
content: counter(listnum, upper-roman);
}lower-roman
小文字のローマ数字を表示します。(ⅰ、ⅱ、ⅲ、ⅳ、ⅴ...)
ol li::before{
content: counter(listnum, lower-roman);
}hiragana
ひらがなをあいうえお順で表示します。(あ、い、う、え、お...)
ol li::before{
content: counter(listnum, hiragana);
}katakana
カタカナをアイウエオ順で表示します。(ア、イ、ウ、エ、オ...)
ol li::before{
content: counter(listnum, katakana);
}hiragana-iroha
ひらがなをいろは順で表示します。(い、ろ、は、に、ほ...)
ol li::before{
content: counter(listnum, hiragana-iroha);
}katakana-iroha
カタカナをいろは順で表示します。(イ、ロ、ハ、ニ、ホ...)
ol li::before{
content: counter(listnum, katakana-iroha);
}
