アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：innova
  • 質問日時：
  • 回答数：4件

.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>１１１１１</li>
<li>２２２２２</li>
<li>３３３３３</li>
<li>４４４４４</li>
<li>５５５５５</li>
<li>６６６６６</li>
</ul>

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

  • 回答者： leap_day
  • 回答日時：

こんにちは



<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>１１１１１</li>
<li>２２２２２</li>
<li>３３３３３</li>
<li>４４４４４</li>
<li>５５５５５</li>
<li>６６６６６</li>
</ul>

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

この回答への補足

ありがとうございます。
参考いただいたものからいろいろ試してなんとか糸口が見えてきました。
.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
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

難しいです・・・

通報する
お礼日時：2008/03/31 22:11

No.4

  • 回答者： abril
  • 回答日時：

> どうしても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>の方に定義しておいた方がわかりやすいでしょう。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： taloo
  • 回答日時：

右寄りになるのはlist-style-positionの影響だと思います。


上下の位置についてはmargin-topとmargin-bottomの影響ではないでしょうか。

> CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
そういうときは一度全部消して、最初からやり直す方が早いかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

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

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

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

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

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

通報する
お礼日時：2008/03/31 22:28

No.1

  • 回答者： goldfox
  • 回答日時：

ブラウザによってcssの解釈が違うので、難しいです。


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

http://feed.designlinkdatabase.net/feed/outsite_ …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

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

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

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

通報する
お礼日時：2008/03/31 21:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報