• ベストアンサー

line-heightをページ全体に適用させる方法

line-heightをページ全体に適用させる方法を教えてください。 ページはテーブルで構成されています。その中に文章があり、すべての(画像含む)行送りを通常より若干広く取りたいです。 何も考えずに、 body { line-height:20px; } としてみましたが、変化無しでした。 以下の条件に当てはまる方法を教えてください。 1.ページはすべてテーブルの中に入っています。 2.1つ1つのテーブルに手を加えず一括して変更できるようにしたいです。 以上、よろしくお願いします。

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

  • ベストアンサー
  • thrush76
  • ベストアンサー率27% (38/137)
回答No.1

table { line-height:20px; } や td { line-height:20px; } としてはどうでしょう。

master-3rd
質問者

お礼

すみません。 CSSファイルで管理していたのをすっかり忘れてました。 そちらに書き込みしたらちゃんと反映されました。

master-3rd
質問者

補足

table { line-height:20px; } td { line-height:20px; } 両方変化無しでした。 コピペったので綴り間違えってことではないでしょうし…

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • Kuppycat
  • ベストアンサー率50% (109/216)
回答No.2

テーブル内なら、table { line-height:20px; } で大丈夫のはず。 文字の大きさなどにより、変化がないように見えるだけかも知れません。 20px を 50px など大きくしてみたり、150% など % で指定してみたりして確認してみては?

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • スタイルシート 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で行間をあけています)

    • ベストアンサー
    • HTML
  • line-heightと画像

    例えば、 <div style="line-height:200%"> 一行目<br> 二行目<br> 三行目<br> 四行目 </div> とすれば、それぞれの行間(行の前後の余白)は通常の200%となりますよね。 このとき文章内に(文字と同じくらいの高さの)画像を入れると、IEではその行前後に行間が開かないようなのですが、どうすればよいのでしょうか。 Netscapeでは文章と同じように行間が開いて表示されるのですが。 <div style="line-height:200%"> 一行目<br> <img src="gazou.gif">二行目<br> <img src="gazou.gif">三行目<br> 四行目 </div> のようにすると、二行目と三行目に行間が開きません。 (二行目と三行目のそれぞれの行の前後に余白がありません。) ちなみに、DTDは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ですが、システム識別子をつけても同様でした。 ※準拠にしたらtd,th内にも適用されました。余談ですが。 IEで、画像を含んだ行にline-heightを適用させるにはどうすればよいのでしょうか。 誤った表現をしていたら申し訳ありません。

    • ベストアンサー
    • HTML
  • メイン部分を除く、リストだけにline-heightプロパティを適用する書き方を教えてください

    XHTMLでサイト作成をしています。 メイン部分は除き、リストだけに line-height:normal を適用する書き方を教えてください。 詳しく説明しますと、 CSSファイルで li{ text-align:left; line-height:200% } として、line-heightプロパティで行の高さを200%に指定しました。そうすると、当然ながらリストも含めて200%の高さになってしまいました。しかし、リストだけは、 line-height:normal にしたいのです。どうしたらよいのでしょうか。 ちなみにCSSファイルは、クラス「main」、クラス「menu」に .main{ float:right; width:1000px } .menu{ float:left; width:160px; margin-top:80px } とスタイルを指定しています。 このあと、 「div要素」で各段の範囲をグループ化して、クラス名を指定し、floatプロパティで配置して、幅を指定しました。 このようにして、Webページの左にメニュー、右に本文が表示されるように2段組のスタイルを指定しています。

    • ベストアンサー
    • HTML
  • CSS line-height が効かない

    下記のように<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> どなたかお助けください。

    • ベストアンサー
    • HTML
  • heightとmin-heightの組み合わせ方

    webページでページの縦の長さを以下のようにしたいです。 ブラウザの縦の表示が600px以上だった場合 → ページの縦長さは100% ブラウザの縦の表示が600px未満だった場合 → ページの縦長さは600px つまり、縦長さ100%を維持しつつ、ブラウザの縦長さが600pxを下回った場合にはページの長さを600pxで固定(スクロールバーつき)したいのです。 今現在cssでidを2つ作ってそれぞれに min-height:600px と height:100% を与えてその二つのidでbodyを囲んでいるのですが、うまくいきません。 どなたか教えてください;;

  • min-heightとheightの違いについて

    HTML、CSSを勉強中です。 こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。 ページの内容が少ないときにもフッターを最下部に表示させるため、 いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。 ・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS(一部) html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません(実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。 親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。 そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。 「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、 何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。 だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。

    • 締切済み
    • CSS
  • tdに対してmin-heightの定義、または同じ

    テーブルのtdに対してmin-heightの定義を行いたいのですが、調べてみますと、多くのブラウザでtdなどへは対応外と記述が御座います。 色々と駆使して試してみたのですがうまくいきません。 tdに対してmin-heightをハック的にでも適用することは出来ませんでしょうか? または同じような効果が得られる方法がありましたらアドバイス願います。 min-height:100px; height:auto; height:100px; この様な方法もあったのですが、div要素には効果があるようですがtdにはやはり反映されませんでした。 よろしくお願いします。

    • 締切済み
    • CSS
  • line-heightについて

    お世話になります <style type="text/css"> <!-- td { line-height:30px; } //--> </style> <form action="***.cgi" method="post" name="f"> <table> <tr> <td>1<br>2<br>3<br>4</td> <td> <input type="radio" name="a">1<br> <input type="radio" name="a">2<br> <input type="radio" name="a">3<br> <input type="radio" name="a">4 </td> <td> <input type="radio" name="b">1<br> <input type="radio" name="b">2<br> <input type="radio" name="b">3<br> <input type="checkbox" name="c">A </td> </tr> </table> <input type="submit" value="入力"> </form> としたらFirefox,Operaではline-heightが適用されるのですがIEでは適用されずに段が異なってしまいます <tr>を使って表示すればいいのですがelements[i]を使いたいのです name="a"を選択したらsubmitのdisabledをfalseにしたり checkboxを選択したら全部のチェックを外したり name="a"の選択によってname="b"の一部をdisabledにしたりしてます ですので恐らくelements[i]を奇数・偶数に分けたりして処理すれば<tr>を使って表示できるのだと思うのですが、これ以上複雑にしたくなかったのでlin-heightを使ったのですが何か良い手はないでしょうか?

    • ベストアンサー
    • HTML
  • ページ全体をインラインフレームにしたい

    大きな1枚の画像の上にメニューと本文を同時に表示にするため、ページ全体を2つのインラインフレームにしたページを作ろうとしています。 スタイルシートで左右2カラムのレイアウトにして、左のインラインフレームはwidth:20%;height:100%;、右のインラインフレームはwidht:80%;height:100%;で指定したのですが、指定した覚えもないのに右側に余白ができてしまいます。 htmlやbodyのmarginとpaddingを0pxにしたりwidth:100%;とheight:100%;を入れてみたんですが、効果なしです。 基本的な作り方を習ったこともないので、途方にくれています。 端に余白が出来ないように、ページ全体をインラインフレームにする方法を教えてください!

    • ベストアンサー
    • HTML
  • テーブルタグにheight要素

    少し疑問なので質問です。 テーブルタグにheight要素が適用されない場合というのは、 どういう場合がありますでしょうか? 現在、テーブルを弄っているのですが、 なぜかテーブルタグにheightが適用されません。 一定の大きさ以上にはなるのですが、 それ以下の大きさには設定できない状態です。 例えば、300pxが基のサイズだとして、 それより大きくはできるのですが、小さくは出来ないのです。 CSSで適用しても同様の結果が得られました。 何か理由があるのでしょうか?

    • ベストアンサー
    • HTML