はじめての親子ハイキングに挑戦!! >>

下記のように<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

A 回答 (3件)

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

こんにちは。



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

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

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

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

お礼日時:2008/09/18 09:16

一行ずつだから、または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

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

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

この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ベストアンサー

こんばんは。

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

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

<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 の画像を作ってください。

こんばんは。

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

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

<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)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QIEと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タグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


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

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


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<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>

2の例<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>

3の例<br>(スタイルシートは何も指定していない)<br>

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

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


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

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


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<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ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

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

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

Aベストアンサー

1つのセルだけなら、下記で。
<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&Aを見た人がよく見るQ&A

人気Q&Aランキング