締切済み

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

2014/04/16 14:12

初めて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; }

shugo-ok
お礼率57% (27/47)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

みんなの回答

noname#206842

2014/04/17 23:28 回答No.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)

2014/04/16 19:37 回答No.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">  ＿</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)

2014/04/16 14:42 回答No.1

BODYタグのマージンのせいね一番簡単なのは bodyに margin:0; を設定すること

関連するQ&A

ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF }  </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; 　　　margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ソースは以下のとおりです。 <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- HTML
IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p>  </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div> <div id="footer"> footer </div> </div> </body> </html>
- ベストアンサー
- HTML
CSSレイアウトについて
はじめまして。個人用サイトを趣味で制作しています。下記のようなイメージを、html×cssで組みたいのですが、うまくいきません。なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
xhtml+cssのfloatの使い方、センタリングの方法
xhtml+cssでのプログラミングについて教えてください！初めてxhtml+cssでのプログラミングに挑戦しています。質問したい内容が２つあります。 1.) ページ全体をセンタリング表示したいです。　　(下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に　　さらにfloatさせてleft、lightの２つ横並びのボックスを　　配置することは可能でしょうか？　　また、その際の注意点などはございますでしょうか？ --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css">  </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんがどなたかご理解頂ける方は教えてください。
- 締切済み
- HTML
ホームページで上の空白をなくしたいです。
HTMLとCSSについての質問です。現在、簡単なホームページを作りたいと思っているのですが、どうしても一番上に空白ができてしまって困っています。コードは下記のようなものなのですが、どこを直せばよいのか教えてください。 ================================================================= <!DOCTYPE html> <html> <meta charset="utf-8">   <link href="top.css" rel="stylesheet" type="text/css"> <body topmargin="0"> <div id="warrp" align="center"> <div id="head"> <h1>タイトル</h1> <p>サブタイトル</p> </div> <div id="box2"> <div id="menu"> <h2>menu</h2> <p>左側のコンテンツ</p> </div> <div id="soft"> <h2>soft</h2> <p>右側のコンテンツ</p> </div> <div id="main"> <h2>中央</h2> <p>メインコンテンツ</p> </div> <div id="link"> <h2>link</h2> <p>リンクを張り付け</p> </div> </div> </div> </body> </html> ================================================================= html,body{ height: 100%; margin:0px; padding:0px; } #box2{ width: 100%; /*全体の幅を指定する*/ height: 100%; } #warrp{ margin-top: 0; width: 100%; /*全体の幅を指定する*/ height: 100%; } #head{ margin-top: 0; height: 20%; /*高さを指定する*/ background-color: #FFFFD5; /*わかりやすいように色を指定します*/ } #menu { float: left; /*leftを左に回り込み*/ height: 100%; width: 25%; /*幅を指定する*/ top: 25%; background-color:#492498; } #soft{ float: right; /*mainを左に回り込み*/ width: 25%; /*幅を指定する*/ height: 100%; background-color: #af8585; } #main{ float: left; /*mainを左に回り込み*/ width: 50%; /*幅を指定する*/ height: 30%; background-color: #FFEAEA; } /* #foot{ clear: both; floatの回り込みを解除する height: 70px; 高さを指定する background-color:#E9E9E9; text-align:center; } */ #link{ float: left; background-color: #8ce91a; width: 50%; height: 70%; font-size: 20px; } =================================================================
- ベストアンサー
- CSS
CSSのボックスの配置他について
<head> <title>Webサイト</title> <style type="text/css">  </style> </head> <body> <div id="example"> <div id="example1"><h1>ボックス1</h1></div> <div id="boxL">ボックス左</div> <div id="boxR">ボックス右</div> </div> </body> </html> とタグを打ちこみました。下の部分に文字を書きたいのですがどうすればいいですか？あと、<div id="boxL">ボックス左</div>の所は、普通のHTMLタグを使っても問題ないでしょうか？
- ベストアンサー
- その他（プログラミング・開発）

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

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

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

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録