- ベストアンサー
CSSでwidth100％でもできる余白
- CSSに関する質問です。上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですが、幅を100%にしても余白が出来てしまいます。どうすれば中央の背景を横一杯に広げることが出来るでしょうか？
- また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。
- コードは以下のとおりです。HTML `<html><head><link rel="stylesheet" type="text/css" href="css.css" /></head><body><div id="header"><div class="centerbox"><div id="lang"><ul><li>EN</li><li>CZ</li></div><div id="logo"></div><div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div></div></div><div id="contents"><div class="centerbox">contents</div></div><div id="footer"><div class="centerbox">footer</div></div></body></html> CSS `body{color:white; width:100%;}.centerbox{width:500px; height:100%;}a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートの書き始めに、 html,body{margin:0;padding:0;} の一行を入れておくようにすれば回避できます。 これは常に入れておきましょう。 なお、今後のために・・・どの部分が影響しているかは *{border:solid 1px red;} を入れてみると、わかりやすいです。 また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。
その他の回答 (4)
- tracer
- ベストアンサー率41% (255/621)
1. html/cssにおける余白はmarginとpaddingの2種類があります。 marginは外側の余白、paddingは内側の余白です。 2. html/cssにおける%とはウィンドウに対しての値ではなく、その要素の親の範囲の値です。 したがって、ウィンドウサイズが仮に1000pxあっても、親要素に500pxが設定されていたら、100%を指定しても500px以上にはなりません。また、親要素の幅が100%であっても、親要素自体にmarginやpaddingなどの余白が設定されていると、子要素はその制限を受けます。 上記を前提として、#headerをウィンドウいっぱいの横幅にする場合、#headerの先祖要素であるhtml,bodyの幅が100%であり、かつpaddingとmarginが0である必要があります。その上で、#headerのwidth:100%;margin:0;padding:0が本当の意味で有効になります。 その部分だけを抜き出すと html,body,#header{ margin:0; padding:0; width:100%; } #header{ height:100px; background-color:#00; } このようにすれば、幅がウィンドウいっぱいの高さ100px、赤背景の#headerが表示されます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。 ちなみに、HTML/CSSをきちんと整理してみましょう。 内容がわからないので、想像を働かせた部分もあるので適当に修正してください。 ★html,bodyのmarginを0にすること ★コンテナブロックのmarginを0にしても、その内部の要素にmarginがある場合もあるので修正すること 下記サンプルの div.header>*,div.section>*,div.footer>*{margin:0 10px;} が、それを消す書き方です。 ★サンプルはリキッドで、スマートフォン用の480pxから幅広のディスプレイに対応しています。 ※ これらの書き方は何度も説明しているはずです。理解しておかないと、ひとつひとつみな聞かなければならなくなります。それじゃ埒が明きません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;color:white;width:100%;} a:link{color:aua;} a:visited{color:blue;} a:hover,a:focus{color:yellow;} div.header,div.section,div.footer{ ＿width:70%;min-width:480px;max-width:800px;margin:0 auto; } div.header>*,div.section>*,div.footer>*{margin:0 10px;} div.header,div.footer{background-color:black;position:relative;} div.section{ ＿border-style:double; ＿border-width:6px 0 6px 0; ＿border-top-color:yellow;border-bottom-color:blue; ＿background:gray url(./images/background/stone.jpg); } div.header{min-height:90px;text-align:center;} div.header h1:before{ ＿content:url(./images/logo.gif); ＿width:150px;height:80px; ＿background-color:white; ＿position:absolute;top:5px;left:5px; } div.header ul.nav,div.header ul.nav li{ ＿display:block;list-style-type:none; ＿margin:0;padding:0; ＿text-align:center; } div.header ul.nav{text-align:right;} div.header ul.nav li{display:inline-block;width:4em;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<ul class="nav" id="langSelect"> ＿＿＿<li>EN</li> ＿＿＿<li>CH</li> ＿＿</ul> ＿＿<ul class="nav" id="siteMap"> ＿＿＿<li>home</li> ＿＿＿<li>profile</li> ＿＿＿<li>works</li> ＿＿</ul> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- t_ohta
- ベストアンサー率38% (5253/13739)
CSSの body に margin:0px; を足したらどうでしょう。
- SherlockHolmes2
- ベストアンサー率40% (175/429)
margin-left:0px;margin-right:0px; を追加してみては？
お礼
＞html,body{margin:0;padding:0;} ということは、bodyはデフォルトだと、paddingが1px以上に設定されているのですか？ *{border:solid 1px red;} これすごくわかりやすいですね。 ありがとうございます。