1. HOME
  2. 開発・ブログ運営
  3. HTML/CSS
  4. list-style-imageで指定した画像がちょっとズレるので修正してみた
2015年05月27日
CSS で Mac キーボード風の装飾
2012年11月19日
Facebook の「いいね」ボタンとかの文字化けを直す方法 ...
2014年09月19日
ref=canonical 属性はむやみに付けない方がよいみた ...
2012年08月24日
Google Chrome 以外では HTML5 の < ...
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2012年06月10日
list-style-imageで指定した画像がちょっとズレる ...

list-style-imageで指定した画像がちょっとズレるので修正してみた

CSSで <ul> タグに list-style-image で指定したリストアイコンと、 <li> タグのテキストの上下がずれて表示されるので修正してみました。

このズレはよくあることのようで定番の解決策があるようです。

結論から言えば、list-style-image でリストアイコンを指定するのではなくて、 list-style-type:none でリストアイコンを全て非表示にしちゃった上で、リストアイコンは背景画像として表示し、<li> は padding: 0 0 0 15px とかでずらして表示させる、というのが定番のテクニックのようです。

参考リンク:list-style-imageでリストイメージがズレます・・。| Yahoo! 知恵袋

もともとずれていた時の CSS はこんな感じでした。

この CSS を適用した場合のズレがこちら。



そこで、定番テクニックどおり、<ul> を、

でリストアイコンを非表示にして、<li> に、

で、背景画像を指定し、padding でずらしました。

背景画像に変えた CSS を適用した場合の表示がこちら。



おー、なおった。

けど・・。

リストアイコン(背景)が真ん中だし。

上揃いにしたいということで、<li> の CSS に、「top」を追加して、

こうしてみたら、



もとに戻った(;_;)。

これは、padding の上下を設定しているせいだと思われ、padding の上下を 0px にすると、



今度はつまった(;_;)。

なんか、CSS って面倒くさい。

ってことで、窮屈なのはあんまりなので、とりあえず、



で、お茶を濁しておこうと思います。

でわでわ。







この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.