list-style-imageで指定したリストマークがズレる時は背景画像にして対処する方法もある

2014/06/14
- HTML&CSS

list-style-imageで指定したリストマークがズレる時があります。そんな時は、背景画像にして対処すると簡単です。

list-style-imageで指定した場合

画像を作って、list-style-imageでリストマークを付けてみます。

<ul id="list1">
    <li>リストアイテム１</li>
    <li>リストアイテム２</li>
    <li>リストアイテム３</li>
    <li>リストアイテム４</li>
    <li>リストアイテム５</li>
</ul>

#list1 li{
	list-style-image:url("list_mark_arrow.png");
}

この様に画像のサイズによってはズレることがあります。
文字の中央より下側にずれています。

リストアイテム１
リストアイテム２
リストアイテム３
リストアイテム４
リストアイテム５

background-imageで指定した場合

今度は同じ画像をbackground-imageを使って指定してみます。

<ul id="list2">
    <li>リストアイテム１</li>
    <li>リストアイテム２</li>
    <li>リストアイテム３</li>
    <li>リストアイテム４</li>
    <li>リストアイテム５</li>
</ul>

#list2 li{
	list-style-type:none;
	background-image:url(list_mark_arrow.png");
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:15px;
}

background-image:url(list_mark_arrow.png”);: 背景に画像を指定します。画像のパスに注意しましょう！
background-repeat:no-repeat;: 画像が繰り返さないように、no-repeatを指定します。
background-position:left center;: 横位置は左、縦位置は中央に指定します。
padding-left:15px;: リストマークの画像と文字が重ならないように画像の幅＋αを指定します。

リストアイテム１
リストアイテム２
リストアイテム３
リストアイテム４
リストアイテム５

※リスト項目が2行になるときは、マークも中央になるので要注意

リストアイテム１リストアイテム１リストアイテム１リストアイテム１リストアイテム１リストアイテム１
リストアイテム２
リストアイテム３
リストアイテム４
リストアイテム５

background-positionを「left top」にすれば、マークは1行目にくるけど、画像サイズによってはマークがずれてしまう。マークアップエンジニアは大変だ（笑）

更新のことを考えれば、list-style-imageで調整した方が良いということかな。でも、知ってると便利です。

追記（2014/08/28）

ふと思い出して追記です。

emで指定してあげれば、複数行になった時でも1行目の中央にできるなと思ったんです。今更（爆）

#list3 li{
	list-style-type:none;
	background-image:url(list_mark_arrow.png");
	background-repeat:no-repeat;
	background-position:left 0.5em;
	padding-left:15px;
}

background-position:left 0.5em;

0.5emで一文字の半分です。