リストタグの画像はbackgroundで指定したほうがいい

HTMLの中にliタグがあります。このliタグには、CSSのlist-style-imageで、○とか●とかの部分を、画像にすることができます。

ただ、list-style-imageで画像を指定すると、画像の位置がおかしくなる場合があります。

フォントサイズとの兼ね合いで画像の位置がずれるらしい

らしい、ということで詳しいことはわからないのですが、ずれます。

そして、list-style-imageの値には、画像の位置を指定する値を指定できません。

詳細な位置指定のために、backgroundプロパティを使う

list-style-imageが使いづらいので、代わりにbackgroundを使いましょう。

backgroundを使う場合、以下のように書けば大丈夫です。

ul li {

list-style: none;

background: url(image-path) no-repeat left top;

padding: 0 0 0 20px;

margin: 0;

}

簡単に説明すると、まず、list-styleでリスト独自のマークを消します。

その次に、背景画像を指定します。背景画像は、特に指定しないとリピートされてしまうので、リピートしないように指定します。

left topは、背景画像の表示開始位置を指定しています。横方向、縦方向の順で記述し、横方向はleft,center,right、縦方向はtop,center,bottomです。その他、pxで指定したり、で指定したりできます。

次に、paddingで左側に余白を作り、背景画像と文字が重ならないようにしています。

text-indentでもいいのですが、リストが複数行になった場合に、背景画像が行中に入ります。

最後は、marginでリストの余白をとっぱらっています。ブラウザのCSSだとmarginが掛かっているので、それをなくさないと余計にインデントされていて、変に描画されます。

スポンサード・リンク