- ベストアンサー
ホームページを中央表示にしたい
こんにちは。前の質問にもあったのですが、 Yahooのようにホームページを中央表示させたいのですが、 W3Cの基準に沿ったホームページ作りを目指しているので、 tableでレイアウトはできません。 また、XHTMLは勉強していないので分からないのですが、 HTML(CSS)で、中央表示させることはできないでしょうか？ もし無理なら、XHTMLとHTMLを一緒に使う事はできるのか 教えていただけませんか？ よろしくお願いします。
- chibiookami
- お礼率81% (65/80)
- HTML
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
CSSでセンタリングは、Internet Explorer に対応するために少しややこしくなります。ANo.5 と同じような内容になりますが、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>センタリング実験</title> <style type="text/css"> <!-- div#contents_parent{ text-align:center; } div#contents{ width:800px; margin:0 auto; } --> </style> </head> <body> <div id="contents_parent"> <div id="contents"> <p> センタリング試し </p> </div> </div> </body> </html> 本当は、div#contents に指定しているCSSを body に指定するだけでできるはずなのですが、Internet Explorer 6 が対応していない。 外側の div#contents_parent は Internet Explorer 5.x でセンタリングさせるためのもの。
その他の回答 (6)
- tyouei
- ベストアンサー率32% (17/53)
No.5です。 No.6の方の回答を見て気付きました。DOCTYPE宣言にURLを入れていませんね。別に入れなくても良いのですが、入れた場合の宣言は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> となります。
- tyouei
- ベストアンサー率32% (17/53)
この質問を見て「お！」と思いました。正直、tableを使わないで作ろうとする人はあまり見かけないので、ちょっと嬉しかったです。 下記の内容はHTML4.01のTransitionalを想定して記述していますが、XHTMLでも正しく表示されるはずです。ちなみに動作確認済みブラウザーはIE 7、FireFox 2、Netscape 7.1です。Operaやマックでの表示は確認していませんが、正しく表示されるはずです。多分。 CSSの記述（外部読み込み、直接書き込みは問わないが、XHTML化を考えているなら外部がいいかもしれません） .cent { text-align: center; } .cont { margin-left: auto; margin-right: auto; width: 835px; } width、つまり幅は設定しておいた方が無難です。835pxは、ただ僕がそうしているだけです。 本体 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> ＝＝省略＝＝ </head> <body> <div class="cent"> <div class="cont"> ＝＝内容＝＝ </div></div> </body> </html> 本来ならcontで設定している分だけで良いはずなのですが、未対応のブラウザーもあるためにcentを加えています。なお、<div class="cent ; cont">は意味が無いことを確認していますので、手間は掛かりますが上記のように記述してください。ちなみにcentとcontの順番は問いません。 これだけ、ポンとやられても分かりづらいかもしれないので、その時は出来る限りお答えします。ちなみに、その内、2つに縦に分けたくもしれません。その時は、またご質問を。なるべく、可能な範囲で回答させて戴きたいと思います。
お礼
できました！！！！！ ありがとうございます！！！！！ この内容の質問にとても親切に、また、丁寧に答えていただき、 感激しています。 私は、strictで作っているのですが、W3Cでチェックしても 合格が出ました。 いろいろな方法を試してもできなくて、すごく悩んだので、 本当にうれしいです。 感謝します。ありがとうございました。
- ICHI-yan
- ベストアンサー率33% (45/134)
キーワードは、下記でグーグルで調べてみました。 中央表示 ｃｓｓ 縦|垂直 15万件ヒットしました。 条件により色々ですので、特定のオススメ方法はありません。が、ｃｓｓだけでも中央表示させることは、可能です。どこかに50％か、50％のpxが入ることが大体の共通点ですね。
お礼
ありがとうございました
- tsukachan
- ベストアンサー率42% (202/470)
W3Cの基準ってtable使っちゃいけないんだ・・・・ W3Cの基準でいけばYahooのトップページでも300個以上のエラー見つかりますから気にしない方が良いと思いますよ。 まあ気になるので有ればCSSでもできるしXHTMLでも出来る。 でもHTMLとXHTMLの混在はできません。 http://past.openvista.jp/blog/documents/W3C/XHTML_FAQ/#declaration_xml
お礼
やはりHTMLとXHTMLの混在はできないんですね。 ありがとうございました。
- ame-sanc
- ベストアンサー率32% (152/467)
お礼
ありがとうございました。
- ptakeda
- ベストアンサー率53% (7/13)
答えになってないと思いますが、ヤフーのＨＰを保存して、自分に 必要ないところを削除したりして表示してみたらどのようになって いるかわかるのではないですか？
お礼
ありがとうございました。
お礼
ご回答いただきありがとうございます。 やはり、ブラウザによって対応しているものとそうでないものとあるんですね。 それを分かりやすく丁寧に教えていただき本当にありがとうございます。