- 締切済み
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)
html4.01をhtml5の記述に変更したからと言って、上部に余白が空くという事はありません。 なのでバージョンの変更が原因ではなく、記述の誤りが原因だと推測できます。 一番クサいと感じるのは、IEの互換モードです。 ・IEで確認している ・変更前か変更後か、どちらかのドキュメントタイプ宣言が正しく書かれていない こういった場合は、互換モードが原因だと思います。 変更後の宣言に問題がある場合にはそれを修正すれば直りますが、 変更前の宣言が誤っていて、現在正しい宣言を記述したのだとすれば、それは「上部に隙間が空くように作られたページ」です。htmlかcssに根本的な問題が錯誤があります。 その場合には質問にある情報だけでは回答する事は出来ません。 ※ 互換モードというのは、cssが一般的になる以前に作られたサイトをあえて正しいcssの表現を適応せず、古いブラウザの表現方法で表示するIE独自の機能です。 html文書の1行目にドキュメントタイプの宣言を正しく書いていない場合に互換モードになります。
- 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にしてありましたので、おかしいなーと思っていました。 結局、原因はまったく別のところにあり、解決いたしました。 せっかくご返答いただいたのに、申し訳ありません。 もう少し他の可能性も調べてから書き込めば良かったです。 丁寧な説明ありがとうございました。
お礼
ご返答ありがとうございます。 ドキュメントタイプの宣言は正しかったです。 原因は、まったく別のところにあり、解決いたしました。 せっかくご返答いただいたのに、申し訳ありません。 もう少し他の可能性も調べてから書き込めば良かったです。 丁寧な説明ありがとうございました。今後の参考にさせていただきます。