- ベストアンサー
全体のレイアウト：中央揃えについて
画面の全体のレイアウトを中央にそろえたいと思い、「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>
- miya_HN
- お礼率100% (1683/1683)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （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で色々いじる必要があります。
お礼
ブラウザによって違うんですね。 ありがとうございました。
関連するQ&A
- 「全体のレイアウト：中央揃えについて」補足
「全体のレイアウト：中央揃えについて」の質問で、IE7ではバグで「text-align: center;」にしなければ中央揃えができないということでしたが下記のように<div class="zen">に「text-align: center;」を指定しても中央揃えはできませんでした。 <?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: 0 auto; text-align: center; } div.k1 { width: 900px; height: 200px; background-color: black; } --> </style> <title></title> </head> <body> <div class="zen"> <div class="k1"></div> </div> </body> </html> ということは、 1.body { text-align: center; }（中央揃え確認済み） 2.文字コードをUTF-8にして、XML宣言を省略する（中央揃え未確認） の二つしかIE7で中央にそろえる方法はないということでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼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>テスト</title> <style type="text/css"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- ３つのボックスを１つとして中央揃えするとき
詳細は下記のページソースを見ることになりますが、私はdivで指定している #header,#sidemenu,#infoのボックスを１つのボックスとして中央揃えをしたいと思ってます。しかしなかなか上手くいかないのでどなたかご教授お願いします。 一応上記３つのボックスを新たにdivタグ（id指定）で囲んでセンタリングしてみましたがネスケとFirefoxは表示が変わらず、IEは#headerのボックスだけがセンタリングされてしまいました(HTML+CSSでのレイアウト) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>Top Page</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } #box { text-align: center; margin-left: auto; margin-right: auto; } #header { width: 800px; height: 100px; color: #ffffff; background-color: #ccffff; } #sidemenu { width: 300px; height: 500px; color: #ffffff; background-color: #87ceeb; float: left; } #info { width: 500px; height: 500px; color: #ffffff; background-color: #0000ff; float: left; } --> </style> </head> <body> <div id="header"> </div> <div id="sidemenu"> </div> <div id="info"> </div> </body> </html>
- ベストアンサー
- CSS
- cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- 自作ＨＰのレイアウトがセンターにきません！＞＜。。
サイトのレイアウト構成は、『ヘッダー・２段組み・フッダー』をそれぞれ分かりやすく色づけしたのですが、なぜか２段組みのとろだけ、センターにきません。 また、３つの構成に上下に隙間が出来てしまいます。 誰かどこがオカシイのか教えてください。 下記にXHTML、CSSを入力しました、メモ帳等にコピペして見て頂けないでしょうか？ ご回答お待ちしております。 【XHTML】 <?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> <title> Ｌｉｓｔ </title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div class="box_header"> </div> <hr /> <div class="box_a"> </div> <div class="box_b"> </div> <hr /> <div class="box_footer"> </div> </body> </html> 【CSS】 @charset "shift_jis"; body { background-color: #ffffff; margin-left: auto; margin-right: auto; font-family: Osaka, "ヒラノギ角ゴ Pro W3","小塚ゴシック Std B","ＭＳ Ｐゴシック",; } hr { height: 1px; width: 100%; background-color: #000000; } div.box_header { background-color: #ff0000; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; } div.box_a { background-color: #808080; float: left; width: 800px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_b { background-color: #0000ff; float: left; width: 400px; height: 2000px; margin-left: auto; margin-right: auto; } div.box_footer { background-color: #008000; clear: left; width: 1200px; height: 200px; margin-left: auto; margin-right: auto; }
- ベストアンサー
- レンタルサーバ・ASP
- ボックスを中央揃えにしたい
先日の質問の回答ありがとうございます。 納得のいくようにできました。 全体を囲ったボックス<div id="base">を中央揃えにしたいので、 #base{ width:800px; margin-left:auto; margin-right:auto; } と書いたのですが、 FireFoxではちゃんと中央揃えされているんですが、IEではされていません。 どうすればいいんでしょうか？お願いします。 http://www.geocities.jp/totti_asroma1927/index.html http://www.geocities.jp/totti_asroma1927/css/base.css
- ベストアンサー
- HTML
- floatを使用すると中央寄せにならない
CSSについて質問があります。 floatを使って2段組のレイアウトにしたのですが、 MacのIE5.2で見ると、floatを使ったdiv（container）だけ中央寄せではなく 左寄せになってしまいます。MacのSafariやFirefoxでは正常に見れました。 URL：http://fuma.xrea.jp/ /* CSSソース*/ html{height : 100%; width : 100%;} body{width : 100%; text-align : center; margin : 0px auto; padding : 0px;} #container{ margin : 0px auto; padding : 0px; width : 720px;} div#main{ text-align : left; width : 490px; margin : 0px; padding : 8px 0px; float : left;} div#side{ margin : 0px; padding-bottom : 8px; text-align : left; width : 230px; float : right;} div#copyright{ text-align : center; margin : 0px auto; padding : 10px 0px; clear : both; width : 720px;} /* HTMLソース */ <div id="container"> <div id="side">てすと</div> <div id="main">てすと</div> </div> <div id="copyright">test</div> <div align="center">を使っても中央寄せになりませんでした。 どうすれば、MacのIEでも中央寄せにできますか？
- ベストアンサー
- CSS
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- CSSレイアウトについて
cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～
- ベストアンサー
- CSS
お礼
なるほど。IEのバグなんですか。IE7でも続いているんですね。 文字コードをUTF-8にして、XML宣言を省略すればバグがなくなるわけですね。 ありがとうございました。