- ベストアンサー
floatを使用したレイアウトでbody全体を中央寄せするには？
floatを使用したレイアウト(下記)で、body全体の中央寄せを実現するには、CSSでどのように記述すれば良いのでしょうか？ <body> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> DIV#left { width: 10px;float:left;background:red;} DIV#center { width:300px;float:left;background:green;} DIV#right { width: 10px;float:left;background:blue;}
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
No.6です。（スレッドになってないので使いにくいな） DOCTYPE宣言の前に何らかの文字が入っていると、後方互換モードになってしまいます（IEのバグです） http://kikky.net/pc/css_bug002.html 私への回答に貼ってあった貴方のコード（xml宣言が無い）をコピーしてチェックしたら、IEでも正しくセンタリングされてましたよ。
その他の回答 (8)
- himajin100000
- ベストアンサー率54% (1660/3060)
蛇足ながらIE 7についても知っておくといいでしょう。正式版でも直ってませんでした。(IE 6と同じ対処で回避可能) http://journal.mycom.co.jp/special/2006/ie7beta2/001.html http://blog.drry.jp/2006/02/25/ie7-b2-xhtml
お礼
ご回答ありがとうございます。 IE7の現状では直ってないのですね・・。 本件は、xml宣言なしでIEに対応しようと思います。 とても参考になりました。 ありがとうございます！
- leap_day
- ベストアンサー率60% (338/561)
こんにちは No.2です <body>の中身だけ変えてるのであまり気にしたこと無かったですけど dtd宣言がないとIEでちゃんと表示できないなんて知りませんでしたね～～（苦笑） <style type="text/css"> <!-- div { width:320px; margin:auto; } #left { width: 10px; float:left; background-color:red; } #center{ width:300px; float:left; background-color:green; } #right { width: 10px; float:left; background-color:blue; } --> </style> <div> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> です あとスペースを空けるときには全角スペースではなく半角スペース,もしくはTabキーで空けてください(No.6様のお礼に書かれてあるものも全角スペースをすべて変えるとちゃんと表示されます） body { margin:0px; }は画面一杯使いたいのであれば追加してください
お礼
ご回答ありがとうございます。 何度もすみません。 全角スペースを修正しました。が、なぜか私の方では上手くいきません。。。 <?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> <meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS" /> <title></title> <style type="text/css"> <!-- div{width:320px;margin:auto;} #left{width:10px;float:left;background:red;} #center{width:300px;float:left;background:green;} #right{width:10px;float:left;background:blue;} --> </style> </head> <body> <div> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> </body> </html>
- goo_ta
- ベストアンサー率62% (5/8)
念のため確認しますが、同じXHTMLでも標準モードと互換モードの文書型宣言があるのはご存知ですか？ http://zyco.abz.jp/design/index3.shtml 標準モードになっていれば、No2の方のやり方で、IEでもうまく行くはずです。私のサンプルを載せておきます。 http://www.mc-taichi.com/web/ ここでは、 margin-left:auto; margin-right:auto; としていますが、同じことです。 あなたもご自分のサンプルを提示されたら、一発で問題点がわかると思いますよ。 ちなみに、コンテンツの幅が可変（％指定）の場合は、<body>の左右余白を同じパーセンテージで指定すれば、一番外のDIV無しでセンタリングできます。 http://www.mc-taichi.com/bbs/bbs.php
お礼
ご回答ありがとうございます。 標準モードの文書型宣言ですが、確認しましたら、標準モードになっておりました。それぞれのモードが存在する事をご指摘いただくまで、知りませんでした。 私のサンプルですが、下記のソースコードです。 まだ、標準モードに必要な何かが抜けているのでしょうか？ <!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> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <style type="text/css"> <!-- BODY { margin:0 auto; } DIV#left { width: 10px;float:left;background:red;margin-left:auto;margin-right:auto;} DIV#center { width:300px;float:left;background:green;margin-left:auto;margin-right:auto;} DIV#right { width: 10px;float:left;background:blue;margin-left:auto;margin-right:auto;} --> </style> </head> <body> <div style="width:320px;margin:auto;"> <div id="left">L</div> <div id="center">C</div> <div id="right">R</div> </div> </body> </html>
- an-gooo
- ベストアンサー率50% (6/12)
ぬぅ・・・ BODYにPADDINGもしくは一番外のDIVにPADDINGかMARGIN・・・ ってのはどうでしょうか？
- an-gooo
- ベストアンサー率50% (6/12)
body以下の物をすべてテーブルでかこってしまう・・・ってんはなしでしょうか？
お礼
ご回答ありがとうございます。 テーブルを使用せずに、横に3つの領域(仮にleft,center,right)をDIVで確保して、そこにいろいろとコンテンツを書こうとしてます。 横に並んだ3つの領域を全体の中央にしたいのですが、floatを使用すると上手くいきません。 ちなみに、XHTML1.0に準拠で書いています。
- himajin100000
- ベストアンサー率54% (1660/3060)
>しかし、IE6では変わらずでした。 きちんと"標準準拠モード"で記述してみて下さい http://oshiete1.goo.ne.jp/qa3249894.html
- leap_day
- ベストアンサー率60% (338/561)
こんにちは サンプルのような書き方をされているのであればIDをつけていない<div>にwidth設定してそれをセンタリングすればいいです (もしくは別のidをつけるか） div{ width:320px; margin:auto; }
お礼
こんにちは。 ご回答ありがとうございます。 ご指摘の方法で、Firefox2.0で実現できました！！ しかし、IE6では変わらずでした。 IEのバグなのかこれから調べますが、お分かりでしたら、 教えていただけると幸いです！
- imopro
- ベストアンサー率35% (58/163)
ものは試し． CSSでbodyに， margin :0 auto; と指定してみてください．
お礼
ご回答ありがとうございます。 試してみましたが、やはり変わらず中央寄せにならずです。 環境は、IE6、Firefox2.0です。 ID指定しているDIVを囲っているDIVに同様の事をしてもだめでした。
お礼
ご回答ありがとうございます。 IE6で、センタリングできました！ DOCTYPE宣言の前にあったxml宣言を無くしたら実現できました。 なるほど、IEのバグのようですね・・・。 XHTMLに準拠する場合xml宣言は必須なので、後方互換モードでセンタリングするか、xml宣言なしのままにしてしまうか。 悩みどころがまた出てきましたが、とにかく実現できたので良かったです！ ありがとうございます！