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

|

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

「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;
}

最近のブログ記事