[CSS] olの数字をCSSでいい感じに装飾する方法

あれ？どうやるんだっけな？となるコトが多いので、勉強がてら記事に。

olを使って連番付きのリストを作ろうと思った場合、数字部分が気に入らない事があります。

ブログパーツで言うと、人気記事のマークアップで、ランキングなんかを作るときに、数字部分にアプローチできれば、捗ること請け合いですね。

と思って、さあ、CSSで装飾や！ってなっても、あれolの数字って、どうやって弄ったらいいんだ？list-style？？みたいになります。

じゃあ、本腰入れてolの数字をカスタマイズしてやろう！と、イマココって感じです。

olとは？

まずはolってなによ？という話しですが、簡単に言えば「数字付きリスト」をマークアップするためのHTMLですね。

<ol>
    <li>こんな</li>
    <li>感じで</li>
    <li>数字付き！</li>
</ol>

1. こんな
2. 感じで
3. 数字付き！

といった具合に。

ブログやサイトのUIを作るときにも役に立つulの仲間みたいなモノですが、数字の装飾が意外に面倒で、使われてないことが多いです。かくいう私もその一人。

逆に言えば、数字部分さえいい感じになれば、便利に違いない！というわけで、ちょっと勉強。

olがはき出す数字を使わない

いきなり矛盾してますが、CSSで数字付きリストをいい感じに装飾するには、olの数字を使わないことにしましょう。ついでにolがデフォルトで持っているpaddingとmarginもキャンセル。

ol {
padding:0;/* paddingキャンセル */
margin:0;/* marginキャンセル */
list-style:none;/* olがはき出す数字を消す */
}

こんな感じで。

olの数字を消して、じゃあどうやって数字を装飾するのよ！と、僕も思いますが、CSSには「数字を表示させる方法」があるんです。

CSSで文字列や画像などのコンテンツを挿入する事が実は可能なんです。ややこしいですね。でも大事なので

CSSの`content`というプロパティー

contentのプロパティーの前に、大事な大事な「疑似要素」を。

CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*prasm

CSSだけで指定した要素の前後に好きなコンテンツを放り込める「content」

この便利なcontetが使えるのはbeforeとafterだけなので、olの中のliに対してbeforeで数字を表示しようという話しです。

ここまでで大事なこと。

• 疑似要素「before」
• CSSで文字や画像が表示できるプロパティー「content」

ゆっくり理解して下さい。

contentを使ってカウンターを作る

なんとcontenの機能には、数を数えてくれる機能まであるじゃないですか、これで、数字付きリスト行けそうですね！

CSS（スタイルシート）で連番・項目名などを付ける｜web bibo

むむ、いきなり話しがややこしくなったぞ！

まとめると、contentに数字（カウンター・連番）を表示したい場合、CSSで指定しなければいけないのは

3カ所

ol {
counter-reset:カウンタ名; /* 数字のカウントをリセットする */
}

li {
}

li:before {
counter-increment: カウンタ名; /* 任意の名前を付ける（もちろん英語で） */
content: counter(カウンタ名); /* 名前を付けたカウンターをcontentで発動！ */
}

何をCSSで指定しているかというと

• counter-increment: カウンタ名;で任意の名前を付ける
• content: counter(カウンタ名);でbefore要素にカウンターを発動！
• counter-reset:カウンタ名;olが複数並んでも数を引き継がないようにいったんリセットさせる

こんな感じで、これだけのコードが必要になりますね。

最終的にliのbeforeで数字を表示するコードは

ol{
counter-reset:number; /* 名前を付けたカウンターをリセット */
list-style:none; /* olが数字を付けることをキャンセル */
margin:0;
padding:0;
}
ol li{
/* リスト部分は好きに装飾！ */
}
ol li:before{
/* カウンタ（数字になる部分） */
counter-increment: number; /* 任意の名前を付けて！ */
content: counter(number); /* 名前を付けたカウンターを呼び出し */
/* 色を変えたり、背景画像を敷いたり！自由自在！ */
}

後はお馴染みのCSSで装飾できるので

まとめ

• olの数字は使わない
• liのbeforeにカウンターで連番を表示
• liのbeforeを自由に装飾！

数字付きリストがうまいこと組めれば、人気記事ランキングとかで捗りますね。

疑似要素のbeforeを使って数字を表示させているので、背景に画像を当てたり、CSSで好きに装飾可能になる方法です。

一度憶えておけばちょっと差の付くカスタマイズが出来るので、仕組みを理解すると捗りますね。はい。

文：シンタロヲフレッシュ

はてブ

pocket

twitter