- ベストアンサー
line-height
trytobeの回答
- trytobe
- ベストアンサー率36% (3457/9591)
逆に、HTML の中身で、改行のみで何の指示もしていない行があるから、「その行数だけ空白行が表示されている」のだと思います。 段落のような区切りが見えづらくなるかとは思いますが、そういう「改行されてしまう空行」は削除して詰めてしまいましょう。
関連するQ&A
- HPの行間を広げる line-height が効かないのです。
お願いします。 ｃｓｓで行間を変化させるために line-height を書き込んでも、行間がぜんぜん動かないのです。 次のように書きました。 *************************** <style type="text/css"> p{_line-height:_1.7em;_} </style> </head> <body> <p> 行間が変わらない<br> 全然変わらない </p>
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシート 見出しを区別させたい
何故HTMLがプログラミングカテゴリーなのか理解に苦しみつつ質問します。 ただ今スタイルシートなるものを勉強中？で、 現在 p { padding: 0em 1em 0em 1em; line-height: 1.2em; } としました。 余白と、行間をとっています。 そして、本文を <p>こんにちは。</p> などと書いているわけですが、 その本文中に下線などの見出しタイトルをつけたいと思っています。 いろいろ調べたら、クラスを作って適応させると分かったのですが、 p.title { うんたらかんたら } <p class="title">タイトル</p> とすると、何も変わりませんでした。 最初に指定している行間と余白も適応されていません。 どこが間違っているのか教えて下さい。
- 締切済み
- 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で行間を文字サイズに応じて
すっかり勘違いをしてまして、 line-height:1.6em; はそのボックス内で使用されている文字サイズの1.6倍の行間で表示 と勘違いしていました。 「ブラウザの文字基準サイズを1emとした時の値」が真なのですね。 ということは例えばline-heigt:2em;でもボックス内のフォントサイズが大きくなろうが小さかろうが行間はピクセル単位では同じであり、極端にボックス内の文字が大きくなった場合には行被りもあると。 そこで・・・ ボックス内の文字サイズに応じてその1.6倍の行間をとってください的なCSSは存在していませんか？ javascript使うしかないです？
- ベストアンサー
- HTML
- スタイルシートで文字色を指定した時、改行させたくな
スタイルシートで文字色を指定した時、改行させたくないです。 <html> <head> <title>test</title> <style type="text/css"> p.red { color: red; } </style> </head> <body> a<p class="red">bcd</p> </body> </html> これをすると a bcd になってしまいます。 実際は、 abcd にしたいです。 pタグは改行もされてしまうとのことですが、色を付けつつ改行しない方法はありますか？ そもそもフォントに色を付けるだけで改行する機能も付いちゃうのが不思議です。
- ベストアンサー
- HTML
- cssを使って文字を装飾しても改行させたくない場合
cssを使って文字を装飾しても改行させたくない場合、どのような方法がありますか？ <html> <head> <title>test</title> <style type="text/css"> p.red { color: red; } </style> </head> <body> 黒<p class="red">赤</p>黒 </body> </html> これだと 黒 赤 黒 になってしまいますが 黒赤黒 にしたい場合 どうすればよいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートの優先順位について
以下のようなHTMLとCSSを記述したとします。 <p>タグに囲まれた「test」という文字に対して、Bodyタグから font-size:10emと、PタグからFontChangeクラスを指定して、 font-size:0.1emを適用しています。 一見、優先順位の高いFontChangeクラスの0.1emが「test」に対して適用されそうに見えますが、 実際には両方のスタイルが適用され、中途半端なフォントサイズになります。 優先順位を無視してスタイルが2重適用されるのは何故でしょうか？ ご教授下さい。 宜しくお願いします。 <html> <head> <style type="text/css"> <!-- body { font-size:10em; } .FontChange{ font-size:0.1em; } --> </style> </head> <body> <p class="FontChange" >test</p> </body> </html>
- ベストアンサー
- 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
- pタグ 改行しない 文字位置指定
pタグを使うけど改行しない、 なおかつ文字は中央に表示する とするにはどうすればいいでしょうか？ <style type="text/css"> p.mi{ text-align:center; display:inline; } </style> </head> <body> <p class="mi">テキスト</p>あああ </body> これだと、改行はされませんが、中央に表示されません。
- ベストアンサー
- HTML
- 決済フォームのセレクトボックスの矢印
決済フォームのセレクトボックスの矢印を（付属画像のように三角の大きい目立つデザインにしたいです。 付属画像の緑色のフォームは自分のコードのWEBの表示画像です。 どうしたらよいでしょうか？回答よろしくお願いいたします。 コードは下にあります。HTML CSS <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <link rel="stylesheet" href="syokigazou.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center;/* セレクトボックス中央に配置 */ } </style> </head> <body> <form action ="hpform1.php" method ="post" class="auto-style1"> <p class="px-num"> 支払方法：※ </p> <div class="auto-style2"> <select name="pay" class="pay" id="pay"> <option value="">支払方法</option> <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> </select> </div> </form> </body></html> ◎◎ｃｓｓのコード（syokicss) /* セレクトボックスのデザイン */ #pay { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 24.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ } /* 入力フォームとフォーム間のの上下の余白， */ input.email{margin:8px 0px;} /* セレクトボックスの上下の余白， */ select.pay{margin:8px 0px;} /* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/ .px-num{ line-height: 0px;/* 文字の行間 */ font-size: 22px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; }
- ベストアンサー
- CSS
お礼
どうもありがとうございました。