CSSでリストのマーク・数字だけ色変えたり、影を付ける方法

HTMLで<li>要素の色を変えたり、影(shadow)を入れたい時、普通に指定するとマークや数字も変わってしまいます。数字の連番などは今までは画像で一つ一つ対応していましたが、それぞれにクラスを指定する必要がありとても面倒ですよね。

CSSだけでは表現できないデザインもありますが、画像を使わずにリストのマークや数字だけにスタイルを加える方法をご紹介します。

マークだけスタイルを変える

マークだけスタイルを変えたい場合、２つの方法があります。

spanを使う

<li>の中をさらに<span>で囲むことで、テキストだけ色を変更する方法です。

<span>は毎回付けるのが手間なので、jQueryなどで自動に付けるようにすると楽です。

$(function(){
  $("ul li").wrapInner("<span></span>");
});

ただ、この方法は簡単ではあるんですが、色を変えることは出来ても、影を付けることは出来ません。
影や他のスタイルを付けたい場合は以下の方法になります。

擬似要素を使う

擬似要素を使ってリストの丸や四角を表現する方法です。

「\2022」はUnicodeのエスケープです。海外サイトだと日本語特有の「●」や「■」が使えない場合がありますが、contentのところをそちらで代用してもいいと思います。

数字だけスタイルを変える

list-style-typeのdecimal(数字)の場合、先ほど紹介したspanの方法で色を変えることは出来ますが、影を付けることは出来ません。だからといって毎回擬似要素に「content: “1”」「content: “2”」・・・なんて書いていくのも面倒です。そこでcounter-incrementプロパティを使います。これで連番を作ることが出来ます。

ここでのnumberはカウンタ名で特にnumberという名前にする必要はありません。
また「content:”Q”counter(number) “.”」ように”Q”を付けることで「Q1.」「Q2.」「Q3.」・・・といったようにすることも出来ます。

まとめ

いかがでしたでしょうか。counter-incrementプロパティやbefore要素はIE7以前では使えないですが、もうここは無視してもいいかなと個人的には思ってます(笑) あと連番の値をリセットするcounter-resetプロパティもあるのでそちらも活用してみてください。