みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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:"MS Pゴシック","MS Pゴシック",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;
}

投稿日時 - 2014-04-16 14:12:29

QNo.8556717

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(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;
}

投稿日時 - 2014-04-17 23:28:12

ANo.2

それ自体は、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>

投稿日時 - 2014-04-16 19:37:13

ANo.1

BODYタグのマージンのせいね

一番簡単なのは
bodyに
margin:0;
を設定すること

投稿日時 - 2014-04-16 14:42:13

あなたにオススメの質問