締切済み

CSS/HTML 行の幅を固定したい

2011/12/17 14:26

文字列に対して背景色を使用しているのですがフォント（メイリオ）の関係上どうしても上下に余白ができてるみたいに見えてしまいます． line-heightで設定しようと思いましたが，行間は調整できても背景色までは調整できません． marginでも結果は同じです．背景色の行間?というか上下の空白を調整したいのですがどうすればできますか．現状と理想を理解してもらうために，一応画像を用意しておきます．加えてこれは，IE9での状況です．できればどのブラウザでも正常に表示できるようにしたいです．

ntkis434
お礼率29% (29/97)

CSS
回答数5
ありがとう数0

みんなの回答 （5）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/23 00:30 回答No.5

ますますわからなくなりました。示されたHTMLソースは <h2><span class="aaaa">ああああ</span></h2> <p>いいいい</p> となっています。そして、「あるいはブロック要素にした方が対策できたりするのかもしれませんが．」・・って、<h2>も<p>もすでにブロックです。ソースでは<h2><span>内容</span></h2>ですから、<span>以外の要素は含まれていませんし、その内容は非置換インライン要素であるテキストのみですので、<h2>と<p>についてのみ設定すればよいことになります。　line-height,padding,margin,font-sizeおよび非置換要素、インライン要素、およびマージンの相殺とかを理解されていないように思われます。 8.1 ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) 10. 視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html ) 10.8 行の高さを計算する ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#line-height ) 　などを読まれて、わからないところを改めて質問してください。　それと、もっと具体的なHTMLサンプルと、どの部分(文字列なのか画像なのか)を、どのように表現したいかを、わかるように示してください。

質問者

補足 2011/12/30 00:01

お返事遅れてすみません．あと説明力が足りなくてすみません．『あるいはブロック要素にした方が対策できたりするのかもしれませんが．』についてですが，既に載せてあるソースのCSSの部分を利用しまして例えばですが <h2><span class="aaaa">文字列</span></h2> と <h2 class="aaaa">文字列</h2> では表示が変わるのはわかりますでしょうか．上では文字列に対して背景色が設定されますが，下はそうではなくて，行そのものに対して背景色が設定されます．個人的には後者のような表示では困るというか作りたいものではないのです．ブロックだとそれができないので，<span>を使って前者のような表示になるようにしているわけです．そして，今回の問題にぶつかって質問に対する回答を見てみると「ブロック要素だったら」とあったので，それなら処理しやすかったのかなと，問題解決する上で<span>があまり良くなかったのかなと思ったので最終手段としてですが『あるいはブロック要素にした方が対策できたりするのかもしれませんが．』と言いました．具体的なソースをということですが，以前に載せたソース以上に具体的にというのは個人的で申し訳ないですが難しいです．その代えにはなりませんが，よりシンプルにしたものを載せます．改めて質問する形になりますが，以下のソースで表示される文字列の上下に余る余分な背景色をできる限り小さくしたいのですが，paddingは0なのでこの属性でこれ以上小さくすることはできません．さらに小さくするにはどうすればいいですか． <html><head><title>Untitled</title><style type="text/css"></style></head><body> <span>abcd1234</span> </body></html>

DrFell
ベストアンサー率55% (305/551)

2011/12/21 06:08 回答No.4

.aaaa { background-color: RGB(255, 154, 53); padding:5px; line-height:30px; } <h2><span class="aaaa">ああああ<br />ううう</span></h2> <p>いいいい</p> line-heightとpaddingをプロパティに追加しました。他は、ソースのままです。 marginでやったが変わらないとのことでしたが、marginは背景外の他との空きですので当然です。paddingは背景がおよぶ詰め物になるので、今回はpaddingにしました。ここで、注意なのですが、インライン要素の場合のpaddingはブロック要素のように自分自身のエリアをひろげません。色はつきます。という動きをします。line-heightを狭め、paddingを広げるとどう動くのかわかると思います。上手く調整してください。

質問者

補足 2011/12/22 18:14

回答ありがとうございます．さっそく適用して調整してみましたが，padding を最小限にしても理想の変化は見られませんでした．やはりフォントの影響があるから無理なのかな，と半分諦めてしまってます．あるいはブロック要素にした方が対策できたりするのかもしれませんが．

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/17 16:49 回答No.3

文書構造をきちんと考えれば、デザインのために意味のないspanを付け足すのはまずいので、きちんと意味のあるマークアップをすべきかも。　また、折り返されたとき重ならないようにするには・・ p{line-height:2em;} p strong,p em,p abbr{display:inline-block;height:1.6em;margin:auto 0;font-style:normal;font-weight:normal;} p strong{background-color:fuchsia;} p em{background-color:yellow;} p abbr{background-color:lime;font-weight:bold;} <p> <abbr title="Hyper Text Markup Language">HTML</abbr>:文字列に対して<strong>背景色を使用している</strong>のですがフォント（メイリオ）の関係上<em>どうしても上下に余白ができてる</em>みたいに見えてしまいます． </p>

質問者

補足 2011/12/18 17:51

そういえばソースコードを載せていませんでした．すみません．関係あると思われる部分だけ載せます． <html><head><title>Untitled</title> <style type="text/css"></style> </head> <body> 　　　　<h2><span class="aaaa">ああああ</span></h2> 　　　　<p>いいいい</p> </body></html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/12/17 16:35 回答No.2

単純に p{line-height:2em;} p span{background-color:fuchsia;display:inline-block;height:2em} <p>文字列に対して<span>背景色を使用している</span>のですがフォント（メイリオ）の関係上どうしても上下に余白ができてるみたいに見えてしまいます．</p> ということですか？

質問者

補足 2011/12/18 17:31

上記コードで確認しましたが，見た感じはそういうことですね．

SAYKA
ベストアンサー率34% (944/2776)

2011/12/17 14:54 回答No.1

inlineに対して背景色指定するんじゃなくてその上位のblockとかに対してなら　できるんじゃないかな。後はblockのpaddingは0でinline側のpaddingがあればCSS準拠ならinlineのboxが広がって背景色がそれに合わせて広がる筈だけど　その辺りはレンダリングエンジン次第。

質問者

補足 2011/12/18 17:59

たぶんインライン指定で自分はやってると思います．ブロックだと何か思い通りに行かなかったような気がしますので．あと，ソースコードを載せるのを忘れていたので，回答 No.3 の回答補足にソースコードを載せました．参考にしてください．

CSS/HTML 行の幅を固定したい