- ベストアンサー
スタイルシートでtableをセンター配置
先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。 <html> <head> <title>タイトル</title> <style type="text/css"> <!-- body{margin-top:0; margin-bottom:0;} .tt1{background-color:#ccffcc; line-height:150%; vertical-align:top;} --> </style> </head> <body> <table align="center" width="600" height="100%" border="0" cellspacing="0" cellpadding="30"> <tr><td class="tt1"> 本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります。 </td></tr> </table> </body> </html> （宣言とmetaは省略） これで画面を縦に3分割したレイアウトで真ん中の色のついたエリアに文字や写真を入れていくフォーマットになります。しかしW3Cによる定義では厳密にはtableの「align」と「height」は非推奨になっているようなのです。そこで、cssで指定しようと思うのですが、tableを左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。 どなかかヒントでも結構なのでいただけませんでしょうか・・・
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こういう単純なレイアウトなら、CSSですべきですよ。 複雑なレイアウトで、どうしてもCSSではやりにくいって時はtable要素も使っても仕方ないかな、とは思いますけど。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- body { margin: 0px; paddig: 0px; } #container { width: 600px; height: 100%; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; text-align: center; padding: 30px; background-color: #ccffcc; line-height: 150%; vertical-align: top; } --> </style> </head> <body> <div id="container">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ。</div> </body> </html> text-align: center;は本来不要ですが、古いバージョンのIEのバグ配慮。 及びDOCTYPE宣言で必ず標準準拠モードにしないと、IE6ではバグの為、本来margin-left: auto; margin-right:auto;でセンタリングされるべきなのが、センタリングされませんので。 検証してないけどこれでうまくいく・・と思います。
その他の回答 (2)
- quads
- ベストアンサー率35% (90/257)
> しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。 この程度のレイアウトであれば、Valid CSS で想定される全てのWWWブラウザに対するクロスブラウザは実現可能です。 より厳密な指定に対してクロスブラウザを実現したいのであれば製作者に相当の知識がないと難しいかもしれません。 製作段階で不具合に繋がる指定を施す可能性があります。
お礼
すいません、Valid CSS という言葉も始めて知ったのですが、「正しい」とか「正確な」CSSという解釈でいいのでしょうか。 ということは、真っ当な間違いのないCSSを書けば古いブラウザやMacの人でも問題ないということですね。 下記で教えていただいたソースでアップしてみて、知人に環境の違いで表示がどうなるか確認してみます。
- goldfox
- ベストアンサー率49% (123/249)
下記プロパティを付け加えましょう。 > 標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。 html,body{height:100%;} > また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。 body{text-align:center;} #containerの中身を左寄せにしたいなら #containerのtext-align: center;をleftに。
お礼
できました！！ html,body{height:100%;}なんてまったく思いつきもしませんでした。 ありがとうございました！ しかし標準準拠モードだとIE5とか古いブラウザで正しく表示されるのでしょうか。特にMacの人とか。 知り合いの中には案外古い環境の人も多いですから、できれば新旧のブラウザでも確実に崩れずに見れるのが望ましいのですが、そこまで多くを望むのは無茶でしょうか・・・
お礼
早速ありがとうございます。先日もDOCTYPE宣言の件で教えていただいた方ですよね。 左右のマージンを:auto;にするというのはいろんな解説サイトを読みましたが書いてませんでしたので、教えていただいて非常にありがたいです。 ただ、書いていただいたソースを丸ごとコピーして検証してみたのですが（WinXP:IE6・Firefox2.0）、標準準拠モード（URLつき）では左右のセンターになりますが、下にくっつきません。また後方互換モードでは下にはくっつきますがセンターにならず左に寄ってしまいます。 両方を実現するのは無理なんでしょうか？？？