CSS、ヘッダーの上にあいだが開く

締切済

質問者：shugo-ok
質問日時：2014/04/16 14:12
回答数：3件

初めて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件)

最新から表示
回答順に表示

No.3

回答者： nanden1548
回答日時：2014/04/17 23:28

下記ソースを、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;
}

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2014/04/16 19:37

それ自体は、html要素、body要素のmarin,paddinが効いているだけです。

・ブラウザによって異なります。

＞初めてWEBページを作ろうとしているものなのですが、
　なら、最初に以下ふたつの仕様書は目を通して、少なくともどこに何が書いてあるか位はわかるように・・・・。最も早く上達する方法です。
★DIVとそのidやclassはそのような使い方はしません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」は、HTML4.01以降、最も重要な部分です。
　残念ながらHTML4.01の勧告(1999年12月)以来15年経ちますが、いまだに理解されているとは言いがたく、業を煮やしてHTML5では、「文書をよりよく構造化するために、『新しい要素』( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」が追加されます。

#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">

＿</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="ユーチューブ</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>