![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
HTML 4.01 Transitionalで制作していたページを、DreamweaverCS5の変換機能を使って、html5に変換しました。
すると、ページ上部に余白が出来てしまい、直そうと思っても原因が分かりません。
CSSで
body {
margin: 0;
}
には指定しています。
あと、コンテンツ部分は
<div class="Wraper"> </div>
で囲っており、その部分も
margin: 0px auto; にはなっています。
いったい何が原因でしょうか。回答をお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
html4.01をhtml5の記述に変更したからと言って、上部に余白が空くという事はありません。
なのでバージョンの変更が原因ではなく、記述の誤りが原因だと推測できます。
一番クサいと感じるのは、IEの互換モードです。
・IEで確認している
・変更前か変更後か、どちらかのドキュメントタイプ宣言が正しく書かれていない
こういった場合は、互換モードが原因だと思います。
変更後の宣言に問題がある場合にはそれを修正すれば直りますが、
変更前の宣言が誤っていて、現在正しい宣言を記述したのだとすれば、それは「上部に隙間が空くように作られたページ」です。htmlかcssに根本的な問題が錯誤があります。
その場合には質問にある情報だけでは回答する事は出来ません。
※
互換モードというのは、cssが一般的になる以前に作られたサイトをあえて正しいcssの表現を適応せず、古いブラウザの表現方法で表示するIE独自の機能です。
html文書の1行目にドキュメントタイプの宣言を正しく書いていない場合に互換モードになります。
ご返答ありがとうございます。
ドキュメントタイプの宣言は正しかったです。
原因は、まったく別のところにあり、解決いたしました。
せっかくご返答いただいたのに、申し訳ありません。
もう少し他の可能性も調べてから書き込めば良かったです。
丁寧な説明ありがとうございました。今後の参考にさせていただきます。
No.2
- 回答日時:
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-html4 … )
(解決策)
html,body{margin:0;padding:0;}
を追加すること。
また、h1,h2,pなどにもデフォルト(ブラウザが持つスタイルシート)でmarginがあります
⇒付録 D. HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
から、
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 … )]より
「著者は、他に適切な要素がないときの最後の最後の手段として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-html4 … )』でしたので、<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>に関してのこともご指摘ありがとうございました。今後の参考にさせていただきます。
No.1
- 回答日時:
こんにちは。
全体の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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html の divとtable の役割
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
CSSで画像を下に配置
-
HTML属性での「""」 「''」違い
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
<div>テキスト</div>
-
何もいじってないのに、表示崩...
-
min-heightとheightの違いについて
-
<!-- #BeginLibraryItemとは
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
iframeを使わずに上下50%ずつに...
-
CSSで、contentsがfooterに重な...
-
ローカルとWeb上で見え方が違う...
-
line-height指定で発生する余白...
-
divの入れ子枠の中に収めたい
-
<H1>とか<H2>とかのタ...
-
一括で全体を右にずらす
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
スペースを使わず文字位置を揃...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
html5でheaderの中にnav
-
開閉式の隠し要素が一瞬表示さ...
おすすめ情報