DOCTYPE宣言によりmarginがきかない

前へ 次へ
このQ&Aのポイント
  • DOCTYPE宣言を追加すると、divタグのマージンが正常に働かなくなる現象が発生します。
  • IE８でDOCTYPE宣言を追加すると、左側のマージンは適用されるが、右側のマージンは端までいってしまいます。
  • 標準準拠モードで正しくマージンを取る方法については、具体的な解決策は見つかっていません。
回答を見る
  • ベストアンサー

DOCTYPE宣言によりmarginがきかない

いつもお世話になります。 やりたいことは、divタグの領域を左右に同じ幅のマージンとなるようにしたいのですが、DOCTYPE宣言を入れたのと入れていないので、マージンが正常に働いてくれません。 例えば以下のコードがあったとします。 <html> <head> </head> <body> <div style="width: 100%; padding 5px; margin: 10px 20px; border: solid 2px black;">aaaaa</div> </body> </html> これをIE８で開いてみると、左右20pxでマージンをとってくれます。これに、 <?xml version="1.0" encoding="windows-31j" ?> <!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"> ・・・（省略）・・・ を追加して開いてみると、左はマージンをとっているのですが、右は端っこまでいってしまいます。 自分なりに調べてみて、DOCTYPE宣言により、標準準拠モードと後方互換モードがある、ということを知ったのですが、ではどうすれば標準準拠モードで正しくマージンを取ることができるのか、というところまで見つけれませんでした。 どうすれば正しくマージンを取ることができるのでしょうか。 宜しくお願いいたします。

  • HTML
  • 回答数4
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

DTD宣言の有無で標準準拠モードと互換モードに切り替わりますがこの時、CSSの解釈が変わってしまいます。 widthとpaddingを指定した場合、標準準拠モードでは余白分ボックスの幅を拡張しますが、互換モードではボックスの幅はそのままで内側に余白を取ります。 これはheightでも同じですね。 なのでwidth(もしくはheight)とその方向に対応するpaddingを一緒に指定しないようにします。 今回の場合はwidthとpaddingを一緒に指定されていましたが、widthの値が100%でした。 ですが、これはブロックボックスであれば何も指定しない状態(width:auto;の時)でも同じ効果が得られます。 なのでwidthの指定を消すことでデザインはそのままで、解釈の違いも出なくなったと。 オススメのページです。 http://adp.daa.jp/web.html

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

widthとmarginは、ウェブ標準ブラウザでは衝突します。 width:auto; margin:10px 20px; とするとよいでしょう。 　widthは、そのブロック要素のサイズを規定しますから、100%と言った時点でウィンドウの描画領域に固定されます。 ボックスモデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) ＞ではどうすれば標準準拠モードで正しくマージンを取ることができるのか、 　ではなくて、その挙動(width幅がウィンドウサイズになる)が正しいのですね。 <div style="width:auto; padding:5px; margin:10px 20px; border:solid 2px black;">

回答No.3

回答しきれていませんでしたね。 ＞IE８ではwidthを指定しているとレイアウトがおかしくなって表示されますが、IE６でも試していまして、IE６ではDOCTYPE宣言、widthの指定を入れていても、レイアウトは正しく表示されています。 xhtmlでマークアップされていませんか？ IE6では一行目にDTD宣言が来ないと強制的に互換モードになります。 xhtmlで一行目にxml宣言がある場合、IE6では互換モードになりIE7以降では正しく解釈されるため標準準拠モードになります。

回答No.1

marginというかpaddingの方が問題ですね。 widthの指定を消すと、レイアウトはそのままで問題なく表示されるはずです。

kamakuragengorou
質問者

お礼

返答ありがとうございます。 確かにwidthの指定を消すと問題なく表示されました。これは気づきませんでした。ありがとうございます。しかしなぜこのような現象が起きてしまうのでしょうか。 IE８ではwidthを指定しているとレイアウトがおかしくなって表示されますが、IE６でも試していまして、IE６ではDOCTYPE宣言、widthの指定を入れていても、レイアウトは正しく表示されています。 これはなぜなのでしょうか。あるいはこういったことを説明しているサイト等あれば教えて頂けると嬉しいのですが。。。 宜しくお願いいたします。

kamakuragengorou
質問者

補足

すみません。もう一点教えていただけないでしょうか。 ＞marginというかpaddingの方が問題ですね これはどのような点においてpaddingが問題だとおっしゃっているのでしょうか。 宜しくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ＤＯＣＴＹＰＥ宣言について

    自分はＸＨＴＭＬ１．０を参考通り <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> このように二列で入力しているのですが、一列で入力しても大丈夫なのでしょうか？また、オススメの宣言タイプ？があったら教えてください。お願いします。

  • DOCTYPE宣言とdocument.body.clientHeight

    お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!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" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>

  • DOCTYPE宣言をするとstyleが適用できない

    webサイト作りの初心者です。 初め、ドキュメントタイプ（DOCTYPE）の宣言を書かずに<html>タグからコードを書いていたのですが、 全体がある程度形になってから、1番上に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> を追加し、<html>を <html xmlns="http://www.w3.org/1999/xhtml"> に変えると、デザインが変わってしまいました。 具体的には、 <div style="height:960;">～</div> と書いて作っていたブロックの高さが、 DOCTYPE宣言を書く前はちゃんと960になっていたのですが、 書いた後は、中に入っているコンテンツ（テキスト）の高さまで縮み、style部分の数字をいくらいじっても変わってくれません。 他にも、style属性のmargin-leftなどが適用されなくなっていました。 なぜ、DOCTYPEの宣言をするとstyleが適用されなくなったのでしょうか？ また、どうすれば適用されるようになるのでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • DOCTYPE は何で宣言すればいいのか

    DOCTYPE は何で宣言すればいいのかどうやって決めればいいですか？ とりあえずネットからコピペしてきた <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> で、宣言してるのですが、果たしてこれがどういう意味かさっぱり分かりません。 とりあえず問題なくブラウザで閲覧できればいいのでしょうか？

    • ベストアンサー
    • HTML
  • ＤＯＣＴＹＰＥ宣言は厳密に気にするべきか？？

    現在ＷＥＢを独学で学んでおります。 そこでＤＯＣＴＹＰＥ宣言についていくつか疑問に思いました。 ひとつでもわかる方はご回答頂ければ幸いです。 １．<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と、ソースの頭に記述しておいて <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の内容で記述(XHTML 1.0 Transitionalで記述)することは可能ですか？？ つまり、HTML 4.01 Transitionalを宣言して終了タグなど、XHTML 1.0 Transitionalの方式で書いても正確に表示されるかを知りたく思って おります。 ２．ＤＯＣＴＹＰＥ宣言を書いてないサイトが多く見受けられますが、 この場合はどのようにＤＯＣＴＹＰＥ宣言と捉えられるのでしょうか？ また、この場合のデメリットとかはありますでしょうか？？ 以上、わかる方いましたらよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • DOCTYPE 宣言

    最初のHTMLの宣言の各部分の意味を教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 最初のDOCTYPEはタグだということはわかるのですが それ以外、例えばPUBLICや『-』や『//』DTD,EN、最後のURLなどの意味がわからないです。

    • ベストアンサー
    • HTML
  • 宣言とcssの関係

    こんばんは。 ご存知の方いらっしゃいましたら教えてください。 サイトを <!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>・・・・・・・・・・・・ こういった書き出しで書き始め、フルＣＳＳサイトを作ってみました。出来上がりしばらくしてから、文法上では <?xml version="1.0" encoding="Shift_JIS"?> こういった宣言も入れたほうがいいことを知り、一行目に追記したところ表示がずれてしまいました。ちなみにhtml4.01の宣言に変えてもずれてしまいます。 これはどうしてでしょうか。 お分かりでしたら教えてください！よろしくおねがいします。

    • ベストアンサー
    • HTML
  • marginが効いてくれません。

    下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • XHTML1.1でposition:relative指定したdivの挙動

    XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!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"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • xml宣言をしたら・・・

    XHTML＋CSSを勉強中なのですが、下記のソースを見てください。 <?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" xml:lang="ja" lang="ja"> <head> -----------省略------------- </head> <body> <div id="container"> -----------省略------------- </div> </body> </html> xml宣言をするまでは画面中央に表示されていたのですが、宣言の行を追加したら左側に寄ってしまいました。 CSS部分は以下のようになっています。 body { font-size: 100%; font-family: sans-serif; color: #333333; margin: 0; padding: 0; background-color: #F0F0F0; } #container { width: 800px; position: relative; margin: 0 auto; background-color: #FFFFFF; } marginの設定の仕方が悪いのかなとか考えたんですが、わかりませんでした。 用は<table align="center">のようなことがしたいんです。 どなたかご教授よろしくお願いします。

    • ベストアンサー
    • XML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する