CSS list-style-imageの挙動
Date:2006/07/15 11:50
リスト(ul,li)を使用すると、ul要素で表示される「・」(IE、Fxデフォルト)を画像に変えることができます。
CSSプロパティの list-style-image を使えば解決…しそうなものですが、IE6.0とFirefoxでは表示の挙動が異なります。
もっと具体的には、画像の位置が異なります。
CSSプロパティの list-style-image を使えば解決…しそうなものですが、IE6.0とFirefoxでは表示の挙動が異なります。
もっと具体的には、画像の位置が異なります。
実際には、次のようになります。
Internet Explorer 6.0：
Firefox：
HTMLコード：
<ul style="list-style-type: none; list-style-image:url(mikan_kmd_listicon.gif);">
<li>いろはにほへと</li>
<li>ちりぬるを</li>
<li>わかよたれそ</li>
</ul>
見て分かるとおり、画像と文字の間に取られる空白が異なります。
そして、これは li 要素に margin を指定しようが、 padding を指定しようがどうにもなりません。
ということで、リストに画像を使う場合は、li の background-image と padding で対応します。
要は、画像の大きさ分 padding-left をとる、と言うことです。
HTMLコード：
<ul style="list-style-type: none; background:url(mikan_kmd_listicon.gif); padding-left: 16px;">
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">いろはにほへと</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">ちりぬるを</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">わかよたれそ</li>
</ul>
Internet Explorer 6.0：
Firefox：
HTMLコード：
<ul style="list-style-type: none; list-style-image:url(mikan_kmd_listicon.gif);">
<li>いろはにほへと</li>
<li>ちりぬるを</li>
<li>わかよたれそ</li>
</ul>
見て分かるとおり、画像と文字の間に取られる空白が異なります。
そして、これは li 要素に margin を指定しようが、 padding を指定しようがどうにもなりません。
ということで、リストに画像を使う場合は、li の background-image と padding で対応します。
要は、画像の大きさ分 padding-left をとる、と言うことです。
HTMLコード：
<ul style="list-style-type: none; background:url(mikan_kmd_listicon.gif); padding-left: 16px;">
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">いろはにほへと</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">ちりぬるを</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">わかよたれそ</li>
</ul>
この記事に対するコメントの投稿
この記事に対するトラックバック
- トラックバックURL
- http://komitsudo.blog70.fc2.com/tb.php/13-7f6ffec8
- この記事にトラックバックする(FC2ブログユーザー)
この記事に対するコメント
質問があるのですが・・・
向日葵３カラムを使っています。
画像を横に並べたり 画像の横に文字を入れたりしたいのですが
<br clear="all">を削除しても 横並びになりません。
お手数ですが 良い方法がありましたら教えてください。
<image src="画像のULR" align="位置">で実現できるかと思います。
『位置』に入るもの
top … （画像横の上部に文字を表示します）
middle … （画像横の中央に〃）
bottom … （画像横の下部に〃）
left … （画像の右側に複数行の〃）
right … （画像の左側に複数行の〃）
早速のご返事ありがとうございます。
今夜早速挑戦してみます。
向日葵の花が大好きで このテンプレートを見つけた時はもう 嬉しくて々・・・３カラムんｐ向日葵の顔の落書き とっても可愛いです。