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プロパティもあるのでそちらも活用してみてください。
