みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。

.ul {
width: 120px;
height: auto;
float: left;
font: 12;
line-height: 150%;
padding: 0;
list-style-image: url(img/side-tab.gif);
}
.li {
font-size: 12px;
margin-left: 1.5em;
}

<ul class="○○○">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>

このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。
横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。
唯一firefoxだけが思うように表示できました。
IE6と7でも違う表示になりました(IE6だとかなり右寄り)
operaに関しては画像とテキストの縦位置がずれてしまっていました。

CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
これを一つのCSSできれいに表示することは不可能でしょうか?
どうかよろしくお願致します。

投稿日時 - 2008-03-30 21:02:17

QNo.3908217

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは

<style type="text/css"><!--
ul {
margin:0px;
padding:0px;
line-height: 150%;
}
li {
padding-left:20px;
background-image:url(img/side-tab.gif);
background-repeat:no-repeat;
width:120px;
font-size: 12px;
}
--></style>

<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>

とか?(幅は140px)
画像が切れるようだったらpadding-left,line-height,widthで調整
幅 = padding-left + width

投稿日時 - 2008-03-31 01:36:17

補足

ありがとうございます。
参考いただいたものからいろいろ試してなんとか糸口が見えてきました。
.ul {
float: left;
margin: 0px;
padding: 0px;
line-height: 150%;
list-style: none;
}
.ul li {
width: 120px;
background-image: url(img/side-tab.gif);
background-repeat: no-repeat;
padding-left: 20px;
font-size: 12px;
}

ただ、indentの画像とテキストの縦位置が全然合いませんでした。
paddingで調整するか、画像をテキストのサイズに合わせるか迷っています・・・

ちなみにフォントのサイズによって縦の高さとかって決まっているのでしょうか?
それが決まっていれば・・・

そんなにうまくはいかないような気がしますが・・・

投稿日時 - 2008-03-31 22:18:48

お礼

ありがとうございます。
早速試させていただいたのですが・・・

だめでした・・・
実はこのコードを2カラムのうちの左側にいれているのですが、右側が崩れてしまいます・・・

難しいです・・・

投稿日時 - 2008-03-31 22:11:00

このQ&Aは役に立ちましたか?

19人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

> どうしてもindentの画像とテキストの縦位置がそろいません・・・orz
> 画像を適正なサイズにしなければいけないのでしょうか?
> 現在は12PXのテキストに10*10pxの画像をindentに使用しています。

上記のみ着目、そこまでの経過は把握していません。また、下記はANo.2の補足での質問者様のCSS設定をベースにした上で改良しています。

----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
ul {
float: left;
list-style: none;
font-size: 12px;
line-height: 150%;
padding: 0px;
margin: 0px;
}

ul li {
width: 120px;
background: url(./images/side-tab.gif) 0 3px no-repeat;
padding-left: 20px;
}
----------------------------------------------------------------------
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
文字コードはShift_JISです。
----------------------------------------------------------------------
(省略)
<body>

<ul>
<li>ああああああああああああああああああああ</li>
<li>いいいいいいいいいいいいいいいいいいいい</li>
<li>うううううううううううううううううううう</li>
</ul>

</body>
(省略)
----------------------------------------------------------------------
「indentの画像とテキストの縦位置がそろ」わない様に見えるのは、"line-height: 150%;"に対する広さの解釈が環境によって異なる為ですが、font-sizeが12pxの場合、ちょっと行間が広目かと思われます。行間に応じてテキストの上下にはテキストそのもののサイズ以上の余白が付加されるので、現在の設定だと、テキストの上には大体2,3pxぐらいの余白ができている感じです。試しに<li>の定義に一時的に適当なborderを付け足してみてください(例:"border: solid 1px #cccccc;")。そうすると、ボーダーにテキストがぴったりくっつくのではなく、テキストの上下に余白がある事がわかるとよくわかると思います。しかし、bakcgroundで定義した画像自体は、表示位置がディフォルト(background-position: left(又は0) top(又は0))のまま特に定義されていない為、各<li>の要素の左上開始位置に背景画像が揃ってしまう(=ボーダーと同じ位置)ので、結果としてテキストの垂直方向の開始位置とにズレができることになります。

したがって、このズレを埋める為には、line-heightを狭めるか、background-positionの垂直方向の位置を若干下にずらしてやるか、のいずれかの調整をすればよいことになります。上記サンプルでは、background-positionのtopの値を3pxほど下にずらす事で、ほぼテキストの位置と揃う感じにしています。line-heightを狭める場合は、110%ぐらいまで落とさないと揃う様にはならないのですが、行間が狭くなるのでかなり見づらくなります。よって、こちらはあまりお奨めできないですね。

IE6.0/7.0、Firefox2.0~、Opera9.25 on Windows XP上でほぼ同様の表示結果を得ています。

以下はCSSの定義の書き方のアドバイスです。
※オリジナルの表記が間違っているわけではありません。

・プロパティはなるべく一括でまとめて表記する方がすっきりします(backgroundの箇所、参考にして下さい)。
・font-sizeは<li>の方ではなく、親要素の<ul>の方に定義しておいた方がわかりやすいでしょう。

投稿日時 - 2008-04-01 18:22:24

ANo.3

右寄りになるのはlist-style-positionの影響だと思います。
上下の位置についてはmargin-topとmargin-bottomの影響ではないでしょうか。

> CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
そういうときは一度全部消して、最初からやり直す方が早いかもしれません。

投稿日時 - 2008-03-31 19:26:56

お礼

ありがとうございます。

みなさのお力添えでなんとか他のboxなどに影響を与えることなくなんとなくはレイアウトを組むことができたのですが・・・

どうしてもindentの画像とテキストの縦位置がそろいません・・・orz

margin topもbottomもかけていないのですが・・・

画像を適正なサイズにしなければいけないのでしょうか?
現在は12PXのテキストに10*10pxの画像をindentに使用しています。

再度ご覧になられましたら、どうかよろしくお願致します。

投稿日時 - 2008-03-31 22:28:49

ANo.1

ブラウザによってcssの解釈が違うので、難しいです。
一番いいのが、JavaScriptでブラウザごとに違うcssを読み込むことだと思います。

http://feed.designlinkdatabase.net/feed/outsite_834.aspx

投稿日時 - 2008-03-30 21:36:26

お礼

ありがとうございます。

こんな便利なものが!
でもJavascriptと見ただけで、難しそうと構えてしまいます(笑

最後の最強の手段で頭に入れておきます!

本当にありがとうございました。

投稿日時 - 2008-03-31 21:44:44

あなたにオススメの質問