- 締切済み
html5でページ上部に余白ができる
HTML 4.01 Transitionalで制作していたページを、DreamweaverCS5の変換機能を使って、html5に変換しました。 すると、ページ上部に余白が出来てしまい、直そうと思っても原因が分かりません。 CSSで body { margin: 0; } には指定しています。 あと、コンテンツ部分は <div class="Wraper"> </div> で囲っており、その部分も margin: 0px auto; にはなっています。 いったい何が原因でしょうか。回答をお願い致します。
- yamairo1012
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- tkmojo
- ベストアンサー率50% (105/207)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
Transitinalが原因ではなく、DOCTYPEが正しく <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> と書かれていたらHTML4.01でも、周囲に余白が出来るはずです。 ・HTML 4.01厳密型DTD。これは、推奨しないこととなった要素や属性を含まず、またフレーム設定用の要素・属性をも含まない。 このDTDを用いる文書は、次の文書型宣言をせよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#version-info ) (解決策) html,body{margin:0;padding:0;} を追加すること。 また、h1,h2,pなどにもデフォルト(ブラウザが持つスタイルシート)でmarginがあります ⇒付録 D. HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html ) から、 h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} または、 div{padding:1px;} あるいは、 div{border:white 1px solid;/*div要素の背景色*/} で余白は消えるはずです。 なお、 <div class="Wraper"> </div> はダメです。!!HTML5では、原則DIVは使いません。HTML5では、とっても強く言われている。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］より 「著者は、他に適切な要素がないときの最後の最後の手段としてdiv要素を使用する事を強く推奨する。div要素ではなく、より適切な要素を使用することは、著者には高い保守性を、読者にはより良いアクセス性の向上につながる。」 すなわち、 <body> <article> <header>文書のヘッダ</header> <section> <h2>見出し</h2> <section> <h3>見出し</h3> </section> </section> <footer> </footer> </article> </body> とすべきです。 まあ、HTML4.01の時代から『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』でしたので、<div class="wrapper">じゃなく<div class="article">であるべきでしたけど(^^) ※)articleとは内部にheader,section,footerを持つと期待される完結した記事を示す要素です。 [サンプル]タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA"> <style media="screen"> <!-- html,body{margin:0;padding:0;background-color:gray;} header,section,footer{width:100%;max-width:900px;margin:0 auto;padding:5px;background-color:white;} section{min-height:400px;position:relative;} section aside{position:absolute;right:0;top:0;width:150px;height:100%;margin:0;background-color:yellow;} section>*{margin-right:160px;width:auto;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ul> ＿＿＿＿<li><a href="#">Some</a></li> ＿＿＿＿<li><a href="#">navigation</a></li> ＿＿＿＿<li><a href="#">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</header> ＿<section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
お礼
ご返答ありがとうございます。 DOCTYPEは下記の通りでした。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 原因は、まったく別のところにあり、解決いたしました。 せっかくご返答いただいたのに、申し訳ありません。 また、<div>に関してのこともご指摘ありがとうございました。今後の参考にさせていただきます。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 全体のHTMLやCSSがわからないので、なんとも言えないのですが、 <div class="Wraper"></div> の中に、マージンがとられるような要素が入っていませんか？ たとえば <div class="Wraper"> <header> <h1>タイトル</h1> </header> </div> とあって、h1のマージンが取られているとか。 なんにせよ、ブラウザのWeb検証機能等を利用してマージンやパディングを視覚化してみたほうがよいです。 メジャーブラウザであればF12キーで起動します。
お礼
ご返答ありがとうございます。 <div class="Wraper"></div>の中には、<h1>などがありましたが 全て0にしてありましたので、おかしいなーと思っていました。 結局、原因はまったく別のところにあり、解決いたしました。 せっかくご返答いただいたのに、申し訳ありません。 もう少し他の可能性も調べてから書き込めば良かったです。 丁寧な説明ありがとうございました。
関連するQ&A
- 最上部の余白の原因
こんばんは、質問させてください。 XHTML 1.0 Transitional、CSS2で大枠のレイアウトを組んでいてはまっています。 コードは抜粋です。現在の書き方だと タイトル部分の上に対してのマージンによって <div class="header">の要素と一緒に余白がとられてしまい真っ白な余白が最上部にできてしまいます。 想定ではヘッダーの中で中央ぐらいにTitleという文字がくると思っていたのですが。。 原因はなんでしょうか？ 宜しくお願い致します。 -index.html <body> <div class="header"> <p class="title">Title</p> </div> </body> -style.css *{ margin:0; padding:0; } .header{ background-color:blue; width:800px; height:250px; } .title{ width:200px; height:50px; background-color:red; color:white; margin-left:210px; margin-top:100px; }
- ベストアンサー
- CSS
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!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=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- safariで見るとページ上部に余白ができてしまう
以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div><!-- /header --> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div><!-- /firstwrap --> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div><!-- /middlewrap --> <div class="clear"><hr /> </div><!-- /clear --> </div><!-- /mainwrap --> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div><!-- /sidewrap --> <div class="clear"><hr /> </div><!-- /clear --> <div id="footer"> </div><!-- /footer --> </div><!-- /inner --> </div><!-- /wrap --> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}
- 締切済み
- ホームページ作成ソフト
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- HTML
- WordPressのヘッダー上部の余白
WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。 調べてみると、多くの場合は http://hello-design-world.com/2011/04/wordpress31head.html のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。 以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください！ ※まだ作成途中なので、ファイルは以下の２つだけです。 ----------------------php--------------------- <!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/TR/xhtml/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- コンテナ --> <div id="container"> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> </div> <!--ヘッダー終わり --> <!-- コンテンツ --> <div id="content"> <?php if(have_posts()): while(have_posts()): the_post(); ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h2> <p class="postinfo"> <?php echo get_the_date(); ?> <?php the_time(); ?> | カテゴリー：<?php the_category(', '); ?> </p> <?php the_content(); ?> </div> <?php endwhile; endif; ?> </div> </div> </body> </html> ----------------------css--------------------- /* Theme Name: Testtheme Theme URI: Description: テストテーマ */ /* コンテナ */ div#container { width: 1000px; margin-right: auto; margin-left: auto; } /* ヘッダー */ div#header {background-image: url(header.jpg); margin-top: 0px; margin-left: 0px; margin-bottom: 20px} div#header h1 {font-size: 1.875em; font-weight: bolder; padding: 10px 0px 0px 10px; margin-top: 0px} div#header h1 a {text-decoration: none; color: #ff8c00} div#header p#desc {font-size: 1em; color: #ffffff; font-weight: bolder; padding: 0px 0px 10px 10px} /* 記事 */ div.post {padding: 15px; margin-bottom: 30px} div.post h2 {background-color: #1e90ff; font-size: 1.3em; padding: 10px; margin: 0} div.post h2 a {text-decoration: none; color: #ffffff} div.post p {font-size: 0.875em; line-height: 1.6; margin-top: 10px} p.postinfo {color: #0c8bcd; text-align: right; margin: 20px 0 0; clear: both} p.postinfo a {color: #0c8bcd}
- ベストアンサー
- ブログ
- CSSでページ上部に余白ができてしまいました。
下記の(質問用に作った)html とcssの記述について教えてください。 これは幅800pxの水色の範囲の中に文字や写真を配置し、その外側は青色で、閲覧者の環境によって余白(青色)の幅が左右対称に増減するようにしました。 これをFirefoxで確認すると上部に5～7mmほど余白の青が見えてしまいます。 margin-top: 0px; と記していますが、反映されていません。 どうすれば、上部の余白をなくして、上まですべて水色になるでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift JIS"> <title>練習・質問の為のサイトです</title> <style type="text/css"> div { width: 800px; margin-top: 0px; margin-right: auto; margin-left: auto; } .cont { width:800px; background-color:lightcyan; } body { background: navy; color: black; } h1 { background: teal; color: white } h3 { font-weight: bold; color: red; } </style> </head> <body> <div class="cont"> <h3>社会科の学習</h3> <h1>日本の地理について</h1> <p><img src="photo.jpg"></p> <h2>日本には47の都道府県があります。</h2> <h3>東北地方</h3> <p>青森 岩手 秋田 宮城 山形 福島<br> <br> <h3>関東地方</h3> <p>群馬 栃木 茨城 千葉 埼玉 東京 神奈川<br> <br> <br> <p>練習用の為、ここまでとする。 </body> </html> 以上です。 どうぞアドバイスよろしくお願いいたします。
- 締切済み
- その他(ソフトウェア)
- 上部の余白をなくしたいのですが・・・
Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright © All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; ｝ どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ＨＰ作成時の上部の余白について
html+cssを本で勉強している超初心者です。HTML/XHTML&cssという本で指示どうりソースを入力しているのですが、プラウザの画面の上部から約20px程余白が出ます。本の指示でプラウザの画面と 接する形で { margin: 0; } を入力しても移動せず{ margin: -20px margin-left: 0px; }と入力するとプラウザ画面と接します。何が原因か何方か教えて頂けませんか？ よろしくお願いいたします。（IE8です）
- 締切済み
- ブラウザ
- 透明divの下に長い余白ができてしまう
サイトを作成してるのですが透明divの下に長い余白ができてしまう【HTML・CSS】 opacityを使って背景色を透過、文字は透過しないで コンテンツを配置する方法 （http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1154742441）を 参照して組んだのですがこの透明dｉｖを閉じた後、長い空白（余白？）が 出来てしまいます。contents_area2のdivが閉じたすぐ下に ナビゲーションメニューを入れたいのですが どうすればいいのでしょうか？ 見にくいですが一番下の深緑がナビゲーションメニューです 【ＨＴＭＬ】 <!--透明ボックス--> <div id="contents"></div> <!--コンテンツ--> <div id="contents_area2"> コンテンツ～～～（フロート使ってます） <!--フロート解除--> <div id="clear"></div> </div> <!--メニュー--> <div class="nav"> <ul> <li>＃＃＃</li> <li>＃＃＃</li> <li>＃＃＃</li> </ul> </div> 【ＣＳＳ】 /* --- 透明ボックス --- */ #contents{ width: 870px; min-height:550px; margin: 5px auto 0; background-color:#FFF; opacity: 0.4; filter: alpha(opacity=40); /* IE6、IE7対応 */ -moz-opacity: 0.4; /* Firefox1.5以前対応 */ } /* --- コンテンツ --- */ #contents_area2{ position:relative; top:-550px; /*550pxできっちり合うはずなのですが5pxほどずれます */ width: 870px; min-height:550px; margin: 5px auto 0; } /* --- フロート解除 --- */ #clear { clear: both; } /* --- ナビ（メニュー） --- */ .nav{ width: 100%; background-color: #093; height: 60px; } .nav ul{ list-style:none; } .nav li{ display:inline; width:100px; font-size: 14px; font-weight: bold; color: #FFF; } DreamWeaverCS3 Windows7
- 締切済み
- CSS
- CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。
CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!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" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>
- 締切済み
- HTML
お礼
ご返答ありがとうございます。 ドキュメントタイプの宣言は正しかったです。 原因は、まったく別のところにあり、解決いたしました。 せっかくご返答いただいたのに、申し訳ありません。 もう少し他の可能性も調べてから書き込めば良かったです。 丁寧な説明ありがとうございました。今後の参考にさせていただきます。