list-style-imageで指定したリストマークがズレる時は背景画像にして対象する方法もある
2014/06/14
list-style-imageで指定したリストマークがズレる時があります。そんな時は、背景画像にして対処すると簡単です。
list-style-imageで指定した場合
画像を作って、list-style-imageでリストマークを付けてみます。
|
1 2 3 4 5 6 7 |
<ul id="list1"> <li>リストアイテム１</li> <li>リストアイテム２</li> <li>リストアイテム３</li> <li>リストアイテム４</li> <li>リストアイテム５</li> </ul> |
|
1 2 3 |
#list1 li{ list-style-image:url("list_mark_arrow.png"); } |
この様に画像のサイズによってはズレることがあります。
文字の中央より下側にずれています。
- リストアイテム１
- リストアイテム２
- リストアイテム３
- リストアイテム４
- リストアイテム５
background-imageで指定した場合
今度は同じ画像をbackground-imageを使って指定してみます。
|
1 2 3 4 5 6 7 |
<ul id="list2"> <li>リストアイテム１</li> <li>リストアイテム２</li> <li>リストアイテム３</li> <li>リストアイテム４</li> <li>リストアイテム５</li> </ul> |
|
1 2 3 4 5 6 7 |
#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で調整した方が良いということかな。でも、知ってると便利です。