プロが教えるわが家の防犯対策術！

CSS line-height が効かない

解決済

  • 質問者：brosis
  • 質問日時：
  • 回答数：3件

下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、

<td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。

sample.css
table td.aa {
font-size : 0.8em;
line-height:150%;
}

sample.html
<table>
<tr><td class="aa"><a href="http://......">ああああああああ</a>
</td></tr>
<tr><td class="aa"><a href="http://......">いいいいいいいい</a>
</td></tr>
</table>

どなたかお助けください。

通報する

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

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「機能 LINE」に関するQ&A： 教えて下さい‼︎ Line機能の話です。 誤って‥大事な方をブロック後に削除してしまいました‥(*_

さらに表示

「LINE クラス」に関するQ&A： 中２女子です。同じクラスで仲がいい男子(A君)を好きになりました。LINEでもよく話すし、趣味がよく

「CSS 効かない」に関するQ&A： javascriptで文字サイズ変更-cssが効かない

A 回答 (3件)

No.3ベストアンサー

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

ANo.1-2様のご指摘にある様に2行以上にしてみても結果が変わらない場合について。



> 下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、
> <td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。

内部にaタグがあるかないかは、aタグに対して150%より広いline-heightを（"table td.aa"というセレクタより詳細度が高くなる様に）指定していない限りは、関係ないです。
また、td内の「行の間隔を狭める為」なのであれば、現在の様にtdに対して直接line-heightを指定する方法（無駄に入れ子を作らない）で間違ってもいません。
ただ、"line-height:150%;"というのはどちらかと言えば”割と広め”な値の様に思われます。これで「狭める」という事は、親要素のline-heightの値はもっと大きい（151%以上）のでしょうか？もしも親要素の値よりこちらが小さくなっていないのであれば結果として「狭め」られた様には見えないので。
それから、「狭め」たいのは本当にtd内の”行間”ですか？”余白”ではなく？もし余白であれば、paddingプロパティの値を調節するのが適切ですが。
提供されたCSSのソース以外の箇所からの継承関係がわかれば、現在思い通りの表示にならない原因が何かという事を突き止めやすくなります。もう少しCSSの情報を詳しく公開された方が宜しいかと。
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しく解説してくださいましてありがとうございます。

通報する
お礼日時：2008/09/18 09:12

No.2

こんにちは。



（回答）質問者さんがおっしゃる通り、line-heightは行間を調節する機能ですから、２行以上の文章があって始めて、その違いが大きく現れるものだと思います。
（根拠）質問者さんのソースをコピーして実行したところ、line-heightは無事に動作したので間違いないと思います。
    • good
    • 1
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

複数ある行（<tr>）間の間隔を狭めたいと思っています。

line-height:150%を 0.5emにしたら、私が望む結果となりました。

通報する
お礼日時：2008/09/18 09:16

No.1

  • 回答者： Suzi
  • 回答日時：

一行ずつだから、または150%だから分かりづらいのではないでしょうか。



<table>
<tr><td class="aa"><a href="?http://......">?ああああああああ</a><br>
たたたたた
</td></tr>
<tr><td class="aa"><a href="?http://......">?いいいいいいいい</a><br>
ちちちち
</td></tr>
</table>

として、line-height の% を300とか数値を変えてみてはどうでしょうか。

また、tdに指定するのではなく、<div class=aa>～</div> の方が確実だと思われます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
参考になりました。

通報する
お礼日時：2008/09/18 09:13

このQ&Aに関連する人気のQ&A

「機能 LINE」に関するQ&A： LINEの安全性

さらに表示

「CSS 効かない」に関するQ&A： background-imageが効かない

「LINE CSS」に関するQ&A： 文字の位置、上下のマージンがずれる

「LINE クラス」に関するQ&A： 一覧から選択した行の行番号を取得について

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qスタイルシート　line-heightのバグ？

ホームページの中で、行幅をあけるのに、line-heightを使っています。

簡潔なタグは以下の通りです。
<html>
<body>
<span style="font-size:13px; line-height:160%;">
<img src="image/point.gif" border=0 width=6 height=8 alt="">てすと1<br>
<img src="image/point.gif" border=0 width=6 height=8 alt="">てすと2<br>
</span>
</body>
</html>

「てすと1」「てすと2」の前に小さな画像を入れています。
WinXP、NN4.XやN7.Xで見た場合は、画像が入っていても問題なく行幅が開きますが、
WinXP、IE6.02で見ると、line-heightが効きません。
これはIEのスタイルシートバグなのでしょうか？

また、打開方法ありましたらお願いします！
（参考まで：テーブルタグを使いたくないのでline-heightで行間をあけています）

ホームページの中で、行幅をあけるのに、line-heightを使っています。

簡潔なタグは以下の通りです。
<html>
<body>
<span style="font-size:13px; line-height:160%;">
<img src="image/point.gif" border=0 width=6 height=8 alt="">てすと1<br>
<img src="image/point.gif" border=0 width=6 height=8 alt="">てすと2<br>
</span>
</body>
</html>

「てすと1」「てすと2」の前に小さな画像を入れています。
WinXP、NN4.XやN7.Xで見た場合は、画像が入っていても問題なく行幅が開きますが、
Win...続きを読む

Aベストアンサー

こんばんは。

ふーん、こんなバグがあったんですねぇ。

で、打開策になるかどうかはともかく、こうすればＩＥでも行間は反映されましたので、ご紹介しておきます。

<HTML><HEAD>
<STYLE type="text/css">
<!--
.SP1{
background-image : url(image/point.gif);
background-repeat : no-repeat;
background-position : center center;}
-->
</STYLE>
</HEAD>
<BODY>
<DIV style="font-size:13px; line-height:160%;">
<SPAN class="SP1">　</SPAN>てすと1<br>
<SPAN class="SP1">　</SPAN>てすと2<br>
</DIV>
</BODY>
</HTML>

要は<SPAN>タグでスペース（全角）を挟んで背景画像にするわけです。背景画像は元の画像のサイズでしか表示されないので、6px * 8px の画像を作ってください。

こんばんは。

ふーん、こんなバグがあったんですねぇ。

で、打開策になるかどうかはともかく、こうすればＩＥでも行間は反映されましたので、ご紹介しておきます。

<HTML><HEAD>
<STYLE type="text/css">
<!--
.SP1{
background-image : url(image/point.gif);
background-repeat : no-repeat;
background-position : center center;}
-->
</STYLE>
</HEAD>
<BODY>
<DIV style="font-size:13px; line-height:160%;">
<SPAN class="SP1">　</SPAN>てすと1<br>
<SPAN class="SP1">　</SP...続きを読む

他の回答も見る

Qcssで「下よせ」ってどうやっていますか？

フロートのレフト、ライトはいいとして、

あるボックス要素内（Ａ）に異なるボックス要素（Ｂ）をいれます。
この（Ｂ）を（Ａ）の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか？

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな？

position: absolute;
bottom: 0px;

他の回答も見る

QＩＥとfirefox、行間の表示が異なってしまう

ulタグをline-heightで行間指定した場合、firefoxとIEでは表示が異なってしまいます。
firefoxでちょうど良い行間にするとIEでは詰まりすぎて文字がつぶれてしまったり。

解消方法を教えていただけないでしょうか？

Aベストアンサー

line-heightの数値はpx指定ですか？％指定ですか？
IEはpxやptなどでフォントサイズを固定できますが、Firefoxではフォントサイズの固定ができません。
行間をpxなど固定サイズで指定していたとき、文字サイズが変われば行間も見た目が変わってしまいます。

「行間を指定する」
http://www.tagindex.com/stylesheet/text_font/line_height.html

「スタイルシートで使用する長さの単位」
http://www.tagindex.com/stylesheet/basic/length.html

他の回答も見る

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか？

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

他の回答も見る

Qテーブルの行の高さを指定する時全てのtdタグに？

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
１つだけ（一番左だけ）指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

１の例<br>（2列ともclass="test"を入れた）<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

２の例<br>（一番左の列だけclass="test"をいれた）<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

３の例<br>（スタイルシートは何も指定していない）<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
１つだけ（一番左だけ）指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

１の例<br>（2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

他の回答も見る

Q[CSS] tableの行の間隔をあける

table {
　border-collapse: separate;
　border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか？

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
　<tbody>
　　<tr>
　　　<th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　</tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
　<tbody>
　　<tr>
　　　<th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　　<tr>
　　　<td>値</td><td>値</td><td>値</td>
　　</tr>
　</tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む

他の回答も見る

Qで文字を右揃えにしたいのですが...(＾-＾；

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね？
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど；

HPタイトル 　　管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです；<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

他の回答も見る

Q訪問済のリンク色を変えない方法

テキストリンクをクリックすると、次から色が変わりますよね？クリック前とクリック後と一緒の色にしたいんです。前に教えてもらったんですが、ページ内の全てのリンクの色が同じ色になってしまったんですが、そういうものなんですか？文字別に色を変えて指定することはできますか？どういうタグを入れたら良いか教えて下さい。

Aベストアンサー

BODYタグをいじります。
<body link="クリック前の色" vlink="クリック後の色">
のようにします。色の部分は#3333FFとか#FFFFFFのように
お好みの色をいれます。

文字別に色を指定するときも
<a href="link_saki.htm"><font color="#FF0066">リンク</font></a>
のように<a>の中に<font color>で指定すれば可能です。

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

他の回答も見る

Qの高さ固定。情報増加時、高さ自動変化

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table...続きを読む

Aベストアンサー

こんばんは。

TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報