- ベストアンサー
全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7 body { text-align: center }で、中央揃え div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2 body { text-align: center }では、中央にならない div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか？ 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
IEのバグです。 HTMLで、DOCTYPE宣言の前にxml宣言が書かれていますよね。 通常URL（http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd）付きのDOCTYPE宣言は、「WEB標準に準拠した文書なので、標準準拠モードで読んでね」という意味です。（DOCTYPEスイッチという） 標準準拠モードで読めばIEでもautoの指定は効きます。 しかしIEでは、doctype宣言の前に何か（xml宣言に限らずコメントでも）が書かれていると、「互換モード」で読んでしまうバグがあるのです。ですので、autoの指定が効かなくなります。 更に、 「text-alignプロパティの指定がボックスの配置に影響を与える」 http://cssbug.at.infoseek.co.jp/detail/winie/b035.html というバグもあり、 body { text-align: center } は、このバグを利用している形です。 文字コードにutf-8を用いれば、xml宣言は省略可能なので、このバグも気にしなくてよくなるのですが…。 「ie6 中央揃え」で検索してみるといいかもしれません。 あとは、良書を購入して勉強されるといいと思います。
その他の回答 (3)
- Nine-nine
- ベストアンサー率49% (25/51)
margin:0 autoはブロック要素に効く text-align:centerはインライン要素に効く ieも含めｃｓｓ文法解釈を完璧に正しく行うブラウザはない。その齟齬を人によりこれバグ・仕様という。 お奨めの方法は、正しい文法を学び、正しい記述をしたうえで、バグっているブラウザに向けて、補正するやり方です。その意味で、IEを基準にサイトを作ると、他のブラウザでは崩れることが多いです。IEは他にもバグだらけなので……。それと標準モードと過去互換モードの選択、違いを認識することは、統一した表現を行う上で欠かすことができません。 今の場合、私なら ----- body{text-align:center;}/*これはIEのバグの為*/ div{width:304px;margin:0 auto;}/*これは全体を囲む*/ div div{text-align:left;float:left;width:150px;border:red 1px solid;}/*これは個々の指定*/ <div><div>本文</div><div>本文</div></div> ------ な感じですね。エリアをわかりやすくするために罫で囲いました。divは便宜上ですので、本来のブロック要素を使ってくださいね。divばかりの記述は明らかに間違いです。divでできることはhxでもtableでもulでもできます。正しい構造の為のタグを利用し、それに当てはまるものが無い時に、divを使ってください。 { margin-left: auto; margin-right: auto } この指定はどんなに考えても、矛盾していますので、このような記述をしているソースは全体に信用できません。参考にするなら避けるべきサイトです。参考にしてはいけない記述がわかるようになれば上達がはやいのですが、なんか知らんけどできたのうちは、無理ですね。
お礼
なるほど。 { margin-left: auto; margin-right: auto } という指定は記述しない方がいいんですね。divの使い方にも注意します。 ありがとうございました。
IE7についてのバグはNo.1さんが書かれている通りだと思います。 質問者さんが書かれている div.Zen { margin-left: auto; margin-right: auto } ですが、CSSで「float: left」を使用している2カラムや3カラムのサイトでは 「margin-left: auto; margin-right: auto」はほとんど見かけないように思います。 一般的に「margin:0 auto;」を使われることが多いようです。 div.Zen { width: 900px; margin:0 auto;} #Ky { float: left; } と書かれることで、IEでもFirefoxでも表示は可能です。（Operaもおそらく可能） あと気になっているのですがCSS記述の最後に「;」を書かれないのは何故でしょうか？ div.Zen { width: 900px; margin-left: auto; margin-right: auto; } body { text-align: center; } #Ky { float: left; } div.Ku1_0 { width: 900px; height: 150px; } background-color: aqua; が正しい記述方法だと思うのですが。
お礼
なるほど。「margin:0 auto;」の方を使った方がいいんですね。 CSS記述の最後に「;」を書くのが、正しい記述法なんですか。これから気をつけたいと思います。 ありがとうございました。
- kazumero
- ベストアンサー率40% (20/49)
センタリングに関しては、参考URLを参考にしてみてください。 どのブラウザでも同じようにセンタリングするには、CSSで色々いじる必要があります。
お礼
ブラウザによって違うんですね。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
なるほど。IEのバグなんですか。IE7でも続いているんですね。 文字コードをUTF-8にして、XML宣言を省略すればバグがなくなるわけですね。 ありがとうございました。