<ol>の番号だけ装飾するには？CSSカウンタを使ってみた | 株式会社グランフェアズ

Posted by NAGAYA on Jan 11th, 2018 順序リストの表示に利用するol要素。 デフォルトではごくシンプルな番号つきリストですが、デザイナーさんからこんな風に番号部分だけ色を変えるなどの装飾がされたデザインを渡されたらどのようにCSSを作りますか？ …簡単そうに見えて、意外と悩むのではないでしょうか？ 今回の記事では、こんなシーンで使えるCSSのTipsをご紹介します。 最初からついている数字は使わない 結論から言うと、list-style-typeによって付与される数字は使いません。 ここだけを装飾する方法はないので、せっかくですが指定自体を無くすことになります。 ol{ list-style-type: none; } ここから活躍するのが当記事の主役、CSS2から登場した「カウンタ機能」です。 これを使って1,2,3,4…といった連番を疑似要素:befor

[quuuteee]

“ counter-increment: item;”

[idr_zz]

カウンタはリスト以外にも使い道がありそうな機能です。 <ol>の番号だけ装飾するには？CSSカウンタを使ってみた | 株式会社グランフェアズ