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

リストマーク

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

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

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

 

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

  • リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
  • リストアイテム5

 

background-imageで指定した場合

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

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

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

  • リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
  • リストアイテム5

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

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

 

 

追記(2014/08/28)

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

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

background-position:left 0.5em;

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

  • リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1リストアイテム1
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4
  • リストアイテム5

 

PR

関連記事