- 締切済み
CSS/HTML 行の幅を固定したい
文字列に対して背景色を使用しているのですがフォント（メイリオ）の関係上どうしても上下に余白ができてるみたいに見えてしまいます． line-heightで設定しようと思いましたが，行間は調整できても背景色までは調整できません． marginでも結果は同じです． 背景色の行間?というか上下の空白を調整したいのですがどうすればできますか． 現状と理想を理解してもらうために，一応画像を用意しておきます． 加えてこれは，IE9での状況です． できればどのブラウザでも正常に表示できるようにしたいです．
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- DrFell
- ベストアンサー率55% (305/551)
.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を広げるとどう動くのかわかると思います。 上手く調整してください。
補足
回答ありがとうございます． さっそく適用して調整してみましたが，padding を最小限にしても理想の変化は見られませんでした． やはりフォントの影響があるから無理なのかな，と半分諦めてしまってます． あるいはブロック要素にした方が対策できたりするのかもしれませんが．
- ORUKA1951
- ベストアンサー率45% (5062/11036)
文書構造をきちんと考えれば、デザインのために意味のない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>
補足
そういえばソースコードを載せていませんでした．すみません． 関係あると思われる部分だけ載せます． <html><head><title>Untitled</title> <style type="text/css"><!-- body { margin : 10px 10px; padding : 0; line-height: 150%; font-size : 13px; font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; } h2 { margin : 0; font-size : 13px; font-weight: normal; } p { margin-top : 0; margin-bottom: 20px; } .aaaa { background-color: RGB(255, 154, 53); } --></style> </head> <body> <h2><span class="aaaa">ああああ</span></h2> <p>いいいい</p> </body></html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に p{line-height:2em;} p span{background-color:fuchsia;display:inline-block;height:2em} <p>文字列に対して<span>背景色を使用している</span>のですがフォント（メイリオ）の関係上どうしても上下に余白ができてるみたいに見えてしまいます．</p> ということですか？
補足
上記コードで確認しましたが，見た感じはそういうことですね．
- SAYKA
- ベストアンサー率34% (944/2776)
inlineに対して背景色指定するんじゃなくてその上位のblockとかに対してなら できるんじゃないかな。 後はblockのpaddingは0でinline側のpaddingがあればCSS準拠ならinlineのboxが広がって背景色がそれに合わせて広がる筈だけど その辺りはレンダリングエンジン次第。
補足
たぶんインライン指定で自分はやってると思います． ブロックだと何か思い通りに行かなかったような気がしますので． あと，ソースコードを載せるのを忘れていたので，回答 No.3 の回答補足にソースコードを載せました． 参考にしてください．
関連するQ&A
- CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- ベストアンサー
- HTML
- CSS IEだけがずれます。
いくら頑張ってもずれます。。 どこを変更すればよいのでしょうか？ ご指導下さい。 CSSは以下です。 /******************************************/ body{/*全体的な設定*/ margin:0px; /*全体の余白*/ text-align:center; /*センタリングIEバグ回避用*/ background: url(04.jpg) left top repeat-x; /*全体の背景の設定*/ } /******************************************/ a:link , a:visited , a:hover , a:active{ /*リンクフォントの設定*/ color: #a44; /*リンクの色*/ text-decoration: underline; /*リンク下線の設定。 } /******************************************/ #baseBlock1{/*コンテンツ全体の設定*/ font-family:Verdana, "Tahoma,Arial,sans-serif,ＭＳ Ｐゴシック",MS UI Gothic, Osaka;/*フォントの設定*/ color:#aaa; /*文字色の設定*/ margin-left:auto; /*センタリングのための左の余白*/ margin-right:auto; /*センタリングのための右の余白*/ width:850px; /*コンテンツ全体の幅*/ text-align:left; /*IEセンタリングバグ回避用。*/ font-size: 0.82em; /*文字サイズ。 文字サイズはInternet Explorerの文字のサイズ－中、Firefoxの文字サイズ－標準サイズに合わせてあります。*/ } /******************************************/ #title{/*タイトル部分*/ margin-left:10px; width:1360px; /*タイトル部分の幅*/ height:200px; /*タイトル部分の高さ*/ background:url(01.jpg) no-repeat; /*タイトル部分の背景設定*/ border:1px solid #fff;/*枠線の設定*/ } /******************************************/ h1{/*タイトル部分のフォント、文字位置の設定*/ font-size:1.3em; /*タイトル文字の大きさ 1emでbaseBlock1のfont-sizeと同じ大きさになります*/ color:#fff; /*タイトル文字の色*/ padding-top:80px; /*文字上側の余白*/ padding-left:50px; /*文字左側の余白*/ margin:0px; /*Firefoxでの余分な余白を削除*/ } /******************************************/ h2{/*サブタイトル部分の設定*/ color:#fff; /*文字色*/ padding-left:50px; /*左に余白*/ padding-top:0px; /*上に余白*/ padding-right:50px; /*右に余白*/ font-size:1.0em; /*文字サイズ*/ margin:0px; /*余白の設定*/ font-weight:normal; /*文字の太さ*/ } /******************************************/ #main{/*メインコンテンツ部分の位置設定*/ width: 1078; /*メインコンテンツの幅*/ float: none; /*メインコンテンツ位置設定*/ padding-top: 31px; /*文字上部の余白*/ padding-bottom:30px; /*フッターとの間隔*/ ; padding-left: 226px;} /******************************************/ #maintext{/*IEとfirefoxのズレ対策用*/ padding:30px; /*文字左側の余白。*/ } /******************************************/ h3{/*見出しの設定*/ border-bottom:1px solid #acf; /*下に枠線*/ border-left:4px solid #acf; /*右に枠線*/ padding-left:4px; /*左に余白*/ font-size:1.1em; /*文字サイズ*/ font-weight:normal; /*文字の太さ*/} /******************************************/ #menu{/*メニュー部分の設定。*/ width:219px; /*メニューの幅*/ float:left; /*メニュー位置設定*/ font-size:0.9em; /*メニューの文字サイズ*/ text-align:center; /*文字位置の設定 padding-top:30px; /*上に余白*/ } /******************************************/ #me-top{/*メニュー上部画像用*/ height:34px;/*高さ*/ width:228px; background:url(02t.jpg) no-repeat; /*背景の設定*/ } /******************************************/ #me-mid{/*メニュー中部画像用*/ width:224px; background:url(03.jpg) repeat-y; /*背景の設定*/} /******************************************/ #me-bot{/*メニュー下部画像用*/ height:32px; /*高さ*/ width:228px; background:url(04b.jpg) no-repeat; /*背景の設定*/} /******************************************/ #menutext{/*IEとfirefoxのズレ対策用*/ padding-left:10px; /*左の余白設定*/ } /******************************************/ .m-title{/*メニュータイトルの設定。*/ height:20px; /*高さ*/ font-size:1.2em; /*テキストサイズ*/ border:1px solid #666; /*枠線の設定*/ color:#aaa; /*テキスト色*/ background:#fff url(05.jpg) no-repeat; margin-top:0px; /*上部に余白*/ margin-left:10px; /*左に余白*/ margin-right:22px; /*右に余白*/ margin-bottom:5px; /*下に余白*/ } /******************************************/
- 締切済み
- CSS
- HTML、CSSに関して
HTMLの初心者です。いくつかご質問させていただきます。 ①段落と段落の間に行間を空けたい場合、必ずCSSを使わなければなりませんか？行間を空けたい場合、HTMLの本文中で段落と段落の間に行間を空けて記述するのは間違っていますか？例えば以下のような例文です。 〈p〉ここでは私が旅先で撮影した写真を掲載しています。日本列島津々浦々、特に温泉巡り、行く先々の海の幸、山の幸には目がありません。〈/p〉 〈p〉それでは当サイトをお楽しみください。〈/p〉 このようなHTMLでもブラウザ表示は行間が空いて表示されると思うのですが。 ②CSSの書式として以下のような書式があります。 p{font-size: 1.3em;} このpというのは何ですか？CSSの書式を記述するときに使うものということで深く考える必要はありませんか？また字間についてですが、:と1.3emの間に半角スペースを必ず入れるということは知っていますが（手持ちのホームページ作成入門本にそう書いてあります）、pと{の間にスペースを入れる必要はありませんか？ ③行間を調整するCSSを記述した以下のファイルを例文として記載します。上記の手持ちのホームページ作成入門本から抜粋しています。 〈html〉 〈head〉 〈title〉序文に変えて〈/title〉 〈style type="text/css"〉 p{line-height 150%;} 〈/style〉 〈/head〉 〈body〉 〈h1〉序文に変えて〈/h1〉 〈p〉ようこそ、このサイトではラーメンマニアの私が食べ歩いたラーメンを写真付きで紹介しています。 〈/body〉 〈/html〉 この150%という値ですとファイルをブラウザにドロップしたとき〈p〉タグの内容の行間が少し広くなります（と入門本に記載があります）。普通に本文の文字の大きさで1行分空けたい時はどうすればいいですか？つまり現在知恵袋で記載しているような1行分です。150%ではなく1emと記述すればいいですか？また、このCSS書式のp{line-height 150%;}ではline-heightと150%の間に質問②で記載したCSS書式のような:がありません。設定名と値の間は:で区切っても半角スペースでもどちらでもいいのですか？ 宜しくお願いします。( ｀・∀・´)
- 締切済み
- HTML
- コンテンツにあわせて伸縮する背景 CSS
http://www.fisco.co.jp/index.html 上記のサイトのように、ヘッダーのリンクボタンの横の左右に伸びるラインと、 フッターの左右に伸びるラインのような背景にしたいと思っています。 その時上記サイトは背景が白ですが、私は上から下にかけてグラデーションにしたいと考えています。 最初縦長で上から下のグラデーション画像を用意し、X方向にリピートしてみたのですが、 コンテンツの長さによっては文字や画像と重なってしまったり、 またはものすごく余白があいてしまったりしています。 CSSは以下のように設定したのですがうまくいきません。 body { background:url(../img/bg.jpg) repeat-x center top; line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; margin: 0; padding: 0; height:100%; } このような場合、コンテンツの長さがページごとに変わっても、 上下にコンテンツを挟む形でラインが表示される方法を教えてください。 説明がうまくできず申し訳ないのですが、よろしくお願いいたします。
- ベストアンサー
- HTML
- ページのマージン・・・
ページをブラックの背景で制作したいのですが、ブラウザで表記したところ、IEやOperaなど、どのブラウザでも、上下左右に20px程度の白い余白部分が現れ、その内側がブラックの背景で表示されます。 スタイルシート上でも、body{margin:0px;}の指定をしているのですが、原因がわかりますでしょうか。
- ベストアンサー
- HTML
- 行と行の間のスペースをなくしたい
行と行の間のスペースをなくしたいのですが、 うまくいきません。 <div style='margin-bottom:0;padding-bottom:0;'>ああ</div> <div style='margin-top:0;padding-top:0;'>いい</div> のような形でいろいろ試しているのですが、行間は残ってしまいます。 ブラウザはＩＥです。 ご教授よろしくお願いします。
- 締切済み
- HTML
- HTML・CSSコーディングが上手く行きません
お世話になります。 HTML・CSSコーディングを依頼されたのですが、 なかなか上手く表示されず、困っております。 外部CSSデータは下記の通りです。 html { height:100%; scrollbar-face-color: #00B7EE; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#00B7EE; scrollbar-3dlight-color: #00B7EE; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { height:100%; margin:0 auto 0; background-color: #FFFFFF; } form { margin:0px; scrollbar-face-color: #00B7EE; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#00B7EE; scrollbar-3dlight-color: #00B7EE; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } #container { width:100%; height:100%; margin:0 auto 0; background-color:#FFFFFF; font-family:sans-serif; background-image: url(../img/top_haikei.gif); background-repeat: no-repeat; background-position: center bottom } #logo{ float:left; margin-left:80px; height:180px; } #box1{ clear:both; text-align:center; line-height:20px; height:230px; } #login_left{ float:left; line-height:20px; width:700px; height:180px; } #login_right{ float:left; height:180px; } #footer { width:950px; clear:both; text-align:center; } ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ IEテスター（http://coliss.com/articles/browser/ie/928.html）で 表示確認しておりますが、 ブラウザのバージョンによって表示のされ方が違ってしまいます。 初心者の為、どなたか丁寧にご教示くださればと思います。 どうぞよろしくお願い致します！
- ベストアンサー
- HTML
- IE8とIE9の文字間・行間
ウェブサイトを作っています。 IE8と、IE9でそれぞれ見ると、IE9のほうが文字間・行間が詰まるのですが、何か解決方法はないでしょうか。 フォントはメイリオを使用しています。 ブラウザの「表示」→「文字サイズ」でサイズを変更できるように、フォントサイズは％指定にしています。 ご存知の方いらっしゃいましたら教えてください。。 よろしくお願い致します。
- 締切済み
- デザイナー・クリエイティブ職
- [CSS]marginとpaddingについて
ブログのCSSを編集しています。 marginとpaddingの違いがいまいち分かっていなかったので、いろいろなCSS講座サイトを見て回ったのですが、少し混乱して来ました…。 自分なりに以下のような結論を出したのですが、何か問題はありますでしょうか。 ■marginとpaddingは要素にボーダー・背景色を使用しない限り、表示に違いはない。 ■marginはIE6などでレイアウトが崩れる場合や、ブラウザによって相殺が起きたり起きなかったりする場合もあるので、余白は全てpaddingで指定する。 ■ページ全体の設定はデフォルトで margin:0px と padding:0px とし、余白のいらない要素には何も記述しない。(CSSをスッキリさせたいので) ■ページ全体のセンタリングは、 margin:0px auto とする。(どのサイズのスクリーンで見ても、真ん中にくるようにしたいので) ネガティブマージンは使用しません。 また、各エリアやテキストに、ボーダーと背景色は使用していません。 表示に違いがないのであれば、出来れば余白は全てpaddingに統一したいのです。(統一した方が気持ち良いので) この解釈で合っているか、教えてもらえると助かります。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSレイアウト・背景グラデーション
初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。
- ベストアンサー
- CSS
補足
お返事遅れてすみません．あと説明力が足りなくてすみません． 『あるいはブロック要素にした方が対策できたりするのかもしれませんが．』についてですが，既に載せてあるソースのCSSの部分を利用しまして例えばですが <h2><span class="aaaa">文字列</span></h2> と <h2 class="aaaa">文字列</h2> では表示が変わるのはわかりますでしょうか．上では文字列に対して背景色が設定されますが，下はそうではなくて，行そのものに対して背景色が設定されます．個人的には後者のような表示では困るというか作りたいものではないのです．ブロックだとそれができないので，<span>を使って前者のような表示になるようにしているわけです．そして，今回の問題にぶつかって質問に対する回答を見てみると「ブロック要素だったら」とあったので，それなら処理しやすかったのかなと，問題解決する上で<span>があまり良くなかったのかなと思ったので最終手段としてですが『あるいはブロック要素にした方が対策できたりするのかもしれませんが．』と言いました． 具体的なソースをということですが，以前に載せたソース以上に具体的にというのは個人的で申し訳ないですが難しいです．その代えにはなりませんが，よりシンプルにしたものを載せます．改めて質問する形になりますが，以下のソースで表示される文字列の上下に余る余分な背景色をできる限り小さくしたいのですが，paddingは0なのでこの属性でこれ以上小さくすることはできません．さらに小さくするにはどうすればいいですか． <html><head><title>Untitled</title><style type="text/css"><!-- body { font-family: "メイリオ"; } span { background-color: RGB(255,154,53); padding: 0; } --></style></head><body> <span>abcd1234</span> </body></html>