- 締切済み
CSS、ヘッダーの上にあいだが開く
初めてWEBページを作ろうとしているものなのですが、 なぜかヘッダーの上にあいだが開いてしまいます。（送付の図のように） このあいだを無くして濃いオレンジからピッタリ、ヘッダーから始めたいんですけれども、どうしたらいいのでしょうか？ 「HTML」 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>公式サイト</title> </head> <body id="body"> <div id="header"> <h1 class="title">title</h1> </div> <div id="page"> <div id="main"> <div class="center"> <img src="top-picture2.jpg" width="675" height="420"> </div> <h4>グループについて・・・</h4> <p>testtesttesttesttesttesttesttesttesttest</p> <div class="history"> <h4>更新履歴</h4> </div> <div class="youtube"> <h4>ユーチューブ</h4> </div> </div> <div id="sidebar"> <img src="top.jpg"> <img src="top2.jpg"> </div> </div> <div id="footer"> <h2>フッター</h2> <p class="center">©2014 dutchiris.lolipop.jp All rights reserved.</p> </div> </body> </html> 「CSS」 @charset "UTF-8"; /* 背景色用 */ #body{ background-color: #FFD5AA; } #header{ height: 75px; background-color: orange; clear: both; /*background: url(path_back1.gif) repeat-x bottom; */ } .title{ color: #FFFFFF; padding-top: 30px; font-size:45px; font-family:"ＭＳ Ｐゴシック","ＭＳ Ｐゴシック",sans-serif; width: 1000px; margin: 0 auto; } #main{ float: left; background-color: #ffffff; width: 750px } #sidebar{ float: right; background-color: #ffffff; width: 250px; } #page{ margin-top:75px ; width: 1000px; margin: 0 auto; } .history{ float: left; width: 375px; } .youtube{ float: right; width: 375px; } #footer{ width: 1000px; clear:both; width:100%; } /* 中央寄せ */ .center{ text-align: center; }
- みんなの回答 （3）
- 専門家の回答
みんなの回答
下記ソースを、reset.cssとして最初に読ませては？・・・ ブラウザ間の仕様をクリアーするため、まず、CSSをリセットしてから、新たに記述すれば問題の発生を防げます。 /* Reset Styles ***********************/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q demo blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } strong { font-weight: bold; } em { font-style: italic; }
- ORUKA1951
- ベストアンサー率45% (5062/11036)
それ自体は、html要素、body要素のmarin,paddinが効いているだけです。 ・ブラウザによって異なります。 ＞初めてWEBページを作ろうとしているものなのですが、 なら、最初に以下ふたつの仕様書は目を通して、少なくともどこに何が書いてあるか位はわかるように・・・・。最も早く上達する方法です。 ★DIVとそのidやclassはそのような使い方はしません。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」は、HTML4.01以降、最も重要な部分です。 残念ながらHTML4.01の勧告(1999年12月)以来15年経ちますが、いまだに理解されているとは言いがたく、業を煮やしてHTML5では、「文書をよりよく構造化するために、『新しい要素』( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」が追加されます。 #body、#header、.title、#main、#sidebar、#page、.history、.youtube、#footer、.center のような一意セレクタ(HTMLのID)、クラスセレクタ(HTMLのclass属性)は、すべておかしいです。 1) 文書構造ではなくプレゼンテーション目的に命名されている。 <div class="center">もし左寄せに配置したくなったらどうするの？？ 2) headerやfooterはarticleの構成要素で一箇所とは限らない 3) DIVやSPANは他に適当な要素がないときの最後の手段 HTML5では、厳しくなります。 4) CSS2以降、セレクタは基点セレクタを最初に書く 5) floatで段組しない!!。 ・フォントやウィンドウ幅を変えると崩れる。 ・本来は主でない要素を前に書くなど文書構造と整合が取れない。 6) コンテンツの主体でない画像は背景にする。 すなわち、下記のような形 ・ウィンドウ幅に依存しない ---スマホでもちょっと文字が小さいけど ---幅広ディスプレイでも ・検索エンジンもどこが主文で、どこがそうでないか判断できる HTML5だと、<div class="header"></div>→<header></header>のように、section,footer,aside,nav要素になるだけ ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み ★タブは＿に置換してあるので戻す。 ★http:はhttp：(：は全角)に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<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;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:720px;max-width:1000px;margin:0 auto;padding:5px;} div.header{min-height: 75px;background-color: orange;} div.header h1{color:white;padding-top: 30px;font-size:45px;} div.section{position:relative;} div.section div.section{width:auto;min-width:0;} div.section h2,div.section p,div.section div.section{margin:0 200px 0 150px;} div.section * p{margin:0;} div.section div.section blockquote{margin:0;} div.section div.section blockquote p{text-align:center;text-indent:0;} div.section div.nav,div.section div.aside{position:absolute;top:0;height:100%;} div.section div.nav{left:0;width:150px;} div.section div.aside{right:0;width:200px;} body{background-color:#FFD5AA;} div.section{background-color:white;} /* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>本文項記事</p> ＿＿＿<p>sectionの階層でレベルが判断される</p> ＿＿＿<blockquote> ＿＿＿＿<p class="youtube"> ＿＿＿＿＿<iframe title="柴犬にそっと毛づくろいをする猫" width="360" height="240" src="http：//www.youtube.com/embed/C0xc28p4gnE?feature=player_detailpage" frameborder="0"> ＿＿＿＿＿＿フレーム未対応の方は<a href="https://www.youtube.com/watch?v=C0xc28p4gnE">ユーチューブ</a> ＿＿＿＿＿</iframe></p> ＿＿＿</blockquote> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/books">著書</a></li> ＿＿＿＿<li><a href="/blog">ブログ</a></li> ＿＿＿＿<li><a href="/form">問合せ</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>関連記事</h3> ＿＿＿<p> ＿＿＿＿ここは本文と直接関係ない記事(aside)を記述する。asideなので本文より後に記述されている。 ＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿＿<address>©2014 dutchiris.lolipop.jp All rights reserved.</address> ＿</div> </body> </html>
- askaaska
- ベストアンサー率35% (1455/4149)
BODYタグのマージンのせいね 一番簡単なのは bodyに margin:0; を設定すること
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
