2008年11月アーカイブ

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

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

文章を読みやすくする1つの方法に「行間を空ける」があります。だいたい、行間を文字の0.4個分から0.8個くらい空けると見やすいです。1文字以上空けてしまうと逆に段落がわかりにくくなってしまうので注意です。

行間の指定には「line-height」プロパティを使います。

例えば、1文字分というのは「1em」(大文字のMの高さを基準)で表したり、pxでフォントサイズを指定している場合は「12px」などとフォントサイズと同じ数値を指定すればよいのですが、段落の中でフォントサイズを変更している場合は、文字が重なって表示されてしまう可能性があります。

よって、単位はあえて指定しないほうが無難です。そうすれば、フォントサイズの異なるテキストが段落内で混在していてもテキストが重なることなく、最も大きなフォントサイズを基準に、指定した行間の高さで表示されます。

CSSコード

p {line-height:1.8;}