リストマークを好きな画像にする

テキストをリスト形式で表示する場合、リストマークを工夫すると可読性が上がります。 ブラウザのほうでも様々なリストマークが用意されていますが、独自に作成した画像をリストマークとして使用することも可能です。

｢list-style-image｣プロパティで画像を指定することも可能ですが、画像によっては位置がずれてしまって美しくない場合があります。

そこで、CSSを駆使してリストマークを美しく配置する方法を紹介します。

テキストが1行の場合

まず、標準で表示されるリストマークを非表示します。

CSSコード

ul {
   list-style:none;
}

そして、backgroundプロパティで画像とその位置を指定します。その際、画像が繰り返さないように指定します。

CSSコード

li { 
   background:url(list-image.gif) 0 50% no-repeat;
}

そのままではテキストと画像が重なってしまいますので、テキストの位置をpaddingで右側に移動させます。空けるサイズは、画像の大きさ＋文字の0.5個分くらいが適当です。実際にブラウザで確認しながら様子を見てみましょう。

CSSコード

li {
   padding-left:10px;
}

以上をふまえて、CSSをまとめると以下のように記述できます。

CSSコード

ul {
   list-style:none;
}

li { 
   background:url(list-image.gif) 0 50% no-repeat;
   padding-left:10px;
}

テキストが2行以上にわたる場合（一般的な方法）

問題は、テキストが2行以上ある場合、上記の方法ではテキストの真ん中にリストマークが表示されるため、不恰好な状態になります。できれば、1行目に合わせてリストマークをしたいですよね。

一般的にされている方法は、上記ではbackgroundプロパティで縦方向にセンタリングを指定しましたが、上から数pxずらして表示するという方法です。

CSSコード

ul {
   list-style:none;
}

li{ 
   background:url(list-image.gif) 3px 50% no-repeat;
   padding-left:10px;
}

ただしこれでは文字サイズを変更した場合、少しずれてしまいます。

テキストが2行以上にわたる場合（:first-letter擬似要素を使う）

文字サイズを変更しても1行目の真ん中にリストマークがくるようにしたいですよね。そんなときは、｢:first-letter擬似要素｣を使用することで解決します。

｢:first-letter擬似要素｣は、テキスト1文字目のスタイルを設定できるものです。

しかしながら、古いブラウザには対応していないので注意が必要です。Windowsでは、IE5.5以上、Firefox全て、NN6以上、Opera6以上、MacではSafariには対応しているようです。

また、IE6と7は｢:first-letter擬似要素｣に対応しているにも関わらず、この方法がなぜか効きません。現在調査中ですが、どうやらbackgroundで指定した縦方向50%の位置が1行目の真ん中ではなくliの真ん中にあるようです。background-imageやborderを指定したときの挙動は他のブラウザと同じなのになぜbackground-positionだけ異なるのか不思議です。

CSSコード

li:first-letter {
   background:url(list-image.gif) 0 50% no-repeat;
   padding-left:20px;
}

li {
   text-indent:-20px;
}