知識、知恵のカタマリ

[PR]コレがGoogleの検索ストーリー

質問する
質問を探す 詳しく検索する

解決済

clip!clip!
Ads By Google
okapyon

画像が混入した文章でline-heightを有効にするには？

宜しくお願いします。

あるテーブルにline-heightを設定しても、変化が見られずに原因を調べていました。
画像が混入していると、line-heightが有効にならないことがわかりました。

下記サンプルの上段は、１５０％の改行幅になりますが、下段の場合にはなりません。
下段の場合に、改行幅を設定するにはどういう方法がありますでしょうか？



<!--contents-->
<TABLE STYLE="line-height: 150%;">
<TR>
<TD>
<A HREF="01.html">国語</A><BR>
<A HREF="02.html">数学</A><BR>
<A HREF="03.html">理科</A><BR>
<A HREF="04.html">社会</A><BR>
<A HREF="05.html">体育</A><BR>
<BR>
</TD>
</TR>
</TABLE>
<!--contents-->

<!--contents-->
<TABLE STYLE="line-height: 150%;">
<TR>
<TD>
<A HREF="01.html"><IMG SRC="../image/0123.gif" WIDTH="10" HEIGHT="10">国語</A><BR>
<A HREF="02.html"><IMG SRC="../image/0123.gif" WIDTH="10" HEIGHT="10">数学</A><BR>
<A HREF="03.html"><IMG SRC="../image/0123.gif" WIDTH="10" HEIGHT="10">理科</A><BR>
<A HREF="04.html"><IMG SRC="../image/0123.gif" WIDTH="10" HEIGHT="10">社会</A><BR>
<A HREF="05.html"><IMG SRC="../image/0123.gif" WIDTH="10" HEIGHT="10">体育</A><BR>
<BR>
</TD>
</TR>
</TABLE>
<!--contents-->

2006-05-30 21:18の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2006-05-31 08:33:56ベスト
オニキス
line-heightは、＊文字の＊高さに対してベースラインの間の値を設定するものなので、画像を囲んでしまうと何が起こるかわかりません。画像のある場所では使わない方が無難です。実際、ブラウザによって、上の画像の入ったtableも表示が違います。

どうしても、、、という場合は、divで囲って、line-heightとlayout-grid-lineを同時に指定すると、いいかもしれません。（layout-grid-*はIEしか効かないです。）

しかしながら、もし、ご質問の件のように科目などを並べるというケースだと、ベストな解決法は、tableを使わずに、ul（順序なしリスト）を使うことです。0123.gifは予め10x10に大きさを調整しておいて、
<ul style="list-style-image:url(../image/0123.gif);line-height:150%;">
 <li/><A HREF="01.html">国語</A>
 <li/><A HREF="02.html">数学</A>
 <li/><A HREF="03.html">理科</A>
 <li/><A HREF="04.html">社会</A>
 <li/><A HREF="05.html">体育</A>
</ul>
とtableの代わりに書くと、幸せになれる気がします。
回答レベル : 回答

liのbackgroundは、かさに凄い裏技です。ズレも調整でき、ばっちりです。

Ads By Google

コメント(15)

コメントする
#1.  万年床生活者（謹慎中）
2006-05-31 06:51:36

試しに

<TABLE STYLE="line-height: 150%;">
<TR>
<TD>
これを
<TABLE>
<TR>
<TD STYLE="line-height: 300%;">
に変更してみてください(“300%”のほうが、とりあえずわかりやすいから）。

#2.  万年床生活者（謹慎中）
2006-05-31 07:13:38

>>#1
私、またとんちんかんなコメントをしてしまったようですねorz
指定する場所（<TABLE><TD>）の問題ではなかったようです。

私がやってみた限りでは
画像混じりの場合は、テキストのみの時より
％の数字を大きしたら反映されました。

#3.  万年床生活者（謹慎中）
2006-05-31 07:14:49

<TABLE STYLE="line-height:200%;">
<TR>
<TD>
<A HREF="01.html">国語</A><BR>
<A HREF="02.html">数学</A><BR>
<A HREF="03.html">理科</A><BR>
<A HREF="04.html">社会</A><BR>
<A HREF="05.html">体育</A><BR>
<BR>
</TD>
</TR>
</TABLE>

<TABLE STYLE="line-height: 500%;">
<TR>
<TD>
<A HREF="01.html"><IMG SRC="http://www.google.co.jp/logos/Logo_40wht.gif"; border="1">国語</A><BR>
<A HREF="02.html"><IMG SRC="http://www.google.co.jp/logos/Logo_40wht.gif"; border="1">数学</A><BR>
<A HREF="03.html"><IMG SRC="http://www.google.co.jp/logos/Logo_40wht.gif"; border="1">理科</A><BR>
<A HREF="04.html"><IMG SRC="http://www.google.co.jp/logos/Logo_40wht.gif"; border="1">社会</A><BR>
<A HREF="05.html"><IMG SRC="http://www.google.co.jp/logos/Logo_40wht.gif"; border="1">体育</A><BR>
<BR>

#4.  万年床生活者（謹慎中）
2006-05-31 07:15:50

最後の
</TD>
</TR>
</TABLE>
は、文字数の都合によりカットしました。

#5.  万年床生活者（謹慎中）
2006-05-31 07:24:58

>>#3 は、私がやってみた内容をそのままコピペしました。

http://www.google.co.jp/logos/Logo_40wht.gif
GoogleのロゴのURLを間違ってしまったようです。失礼しました。

こうなるともうほとんど「コメント荒らし」ですネ＾＾；

またオニキスさんに助けを求めようかな・・・。

#6.  万年床生活者（謹慎中）
2006-05-31 07:38:44

<!--
>>#3 を書き直したい・・・orz
-->

#7.  万年床生活者（謹慎中）
2006-05-31 09:06:09

迷わず
>>1 に一票
鬼先生、待ってましたよ　。・゜・(´Д`)・゜・。ｳｫｰﾝ

#8.  オニキス
2006-06-01 02:14:04

>>1
位置の微調整ですが、これは結構面倒です。上下左右どちらの問題も、厳密に制御するには、ブラウザごとにCSSを切り分けるのがよいのですが、そこまでやるのも面倒だと思いますので、オススメの妥協点を書かせて頂きます。

まず左右ですが、以下のようにpaddingも設定して下さい。

margin-left:10px;
padding-left:10px;
marginだけだと、Firefox等で右に少し寄るので、paddingを調整します。

次にタテですが、もし画像の下の方にブランクがあって、それをカットして調整できるなら、できるだけそれをまず実行します。フォントの高さと画像の高さが揃っていれば、これで済むと思います。そうでない場合は、
vertical-align:middle;
を指定します。IEはこれでいい感じになると思いますが、Firefoxは不満が残ります。

#9.  オニキス
2006-06-01 02:14:42

>>#8
続き：
この辺が妥協点かとも思いますが、画像をulのlist-styleに設定するのではなく、liのbackgroundに設定するという手もあります。

ul{
 list-style-type:none;
 /*list-style-image:url(star.gif);*/
 line-height:150%;
 vertical-align:middle;
 margin-left:10px;
 padding-left:10px;
 text-indent:20px;
}
li{
 background:url(../image/0123.gif) no-repeat left center;
}
これでほぼ満足がいく結果になるかと思います。

#10.  Hukamin
2006-06-01 08:15:44

>>#9
横レスすみません。
LIに背景画像指定って言うのは良いですね。
本来の使い方とは異なりますが、これならブラウザ間の表示の差に頭を悩ませなくて良いかもしれない、と思いました。
PやDIVタグでは似たようなことをしていたのに、LIで使うという頭がありませんでした。
これイイです。
今度何かの機会があったら採用したいと思いました。

#11.  万年床生活者（謹慎中）
2006-06-01 17:09:17

>>#10
完全に理解していないと出来ないコメント・・・うらやましいです(^^;)

#12.  okapyon
2006-06-01 21:07:15

オニキスさん　
liのbackgroundに設定でばっちりうまく行きました。
margin-left:10px;
padding-left:10px;
text-indent:20px;
この３つの数値を調整することで、ぴったりにできますね。
text-indentは、使ったことはなかったのですが、こういう時に効果がでるのですね。
大変、勉強になりました。CSSは奥が深いですね。
また、宜しくお願いします。

万年床生活者（謹慎中）さんも、いろいろとありがとうございました。

#13.  オニキス
2006-06-02 01:16:37

ベストありがとうございました＾＾

ところで、line-heightは結構ハマることがあるので、それを知っている人は、この質問に回答するのを躊躇したと思います。私も少し様子を見て回答する人がいなければ・・・と思っていたのですが、切り込み隊長の突撃っぷりをたまたま発見してしまって、回答させて頂きました。

＞万年床生活者（謹慎中）さん
ブログ関連の質問は見ないことが多いので、見逃していそうなときは、私のブログにコメントして頂ければ見に行きます。AQさんとかのブログに書く方が早いというウワサもありますがｗ
<!--回答ついてないときは、気にせず突撃して下さい！-->

#14.  万年床生活者（謹慎中）
2006-06-02 07:00:45

「旅の恥は掻き捨て」

私こと“万年床生活者”は
ある意味
livedoor knowledgeの旅人だと思ってます。

#15.  万年床生活者（謹慎中）
2006-06-02 17:38:35

>>#12

>万年床生活者（謹慎中）さんも、いろいろとありがとうございました
どういたしまして(^^)
と言いたいところですが、私、今回も完全に役立たずでしたねorz
もし回答していたら、さらに恥をかくところでした＾＾；

>>#13
<!--回答ついてないときは、気にせず突撃して下さい！-->
(ﾟ◇ﾟ)ゞﾗｼﾞｬ

トラックバック(2)

トラックバック一覧
トラックバックURL: