- ベストアンサー
センターに表示をしたいのですが
ホームページビルダーでサイトを作成しています。 最近スタイルシートを勉強しています。 以前ページをセンターにするときは <div align="center"> コンテンツ </div> このようにしていました。 できれば スタイルシーと使いたいのですがセンターに来てくれません。 いまは <head> #content{ width : 760px; margin-left : auto; margin-right : auto; </head> <body> <div id="content"> コンテンツ </div> このようなソースを試したのですが、どこか間違っているのでしょうか。 アドバイスをよろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
hamueです。 >bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメし>ます。 >この方法を試すと、うまくいったのですが、idをいくつか埋め込んでいるので正直テキストをすべて左寄せにするのは面倒ではあります。 ------------------ 確かHTML 4.01 Transitionalで文書型宣言をした場合、IEではmarginを使用した中央揃えができません。 そのため、body要素でtext-alignをcenterにしてボックスを中央に揃えることでどちらの環境にも対応できる、といったものです。 しかし、コレだけではtext-align:centerがbody以下の全てのテキストにも反映されてしまいます。 一般的に使われる手法としては、body以下の全ての要素を<div>で囲み、containerなどのIDを付ける、というものです。つまり ■html側 <body> <div id="container"> <div id="content"> コンテンツ </div> </div> </body> ■CSS側 body { text-align: center; //IE用中央揃え margin: 0; //window周りにできる余白を消す padding: 0; } div#container { //全てを囲む width: 760px; text-align: left; margin: 0 auto; } div#content { // 任意のスタイル } ------------------ これでボックスを中央揃えにしつつ、div#container配下のテキストは左寄せになります。その他デフォルトの設定（フォントサイズ、行間、カラーなど）は全てここで設定しておけば無駄なスタイルを省略できます。 参考になりましたでしょうか？
その他の回答 (2)
- tokoro10_2004
- ベストアンサー率22% (10/45)
HPBのデフォルト設定で吐き出されるDOCTYPE宣言ではIEが互換モードで動作し、margin:autoではセンタリングされません。 DOCTYPE宣言の設定を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> にするとIEが標準モードで動作します。 確か、オプション設定の中にあったと思います。 ただし、IE5.5以前ではだめです。また、互換モードと標準モードのIEの挙動はかなり違うので、シビアなレイアウトをされているなら全部チェックしなおさないといけないかもしれません。
お礼
返事が遅くなりました。 IE5.5以前の関連でDOCTYPEの宣言を考慮しなければいけませんね。 勉強勉強の日々です。 ありがとうございました。
- hamue
- ベストアンサー率33% (2/6)
<head>タグ内に記述するには<style>タグで囲まないと定義されません。 それと記述漏れかもしれませんが#contentの{}が閉じられていません。 ---------------------------------------------- <style type="text/css"> <!-- #content{ width : 760px; margin-left : auto; margin-right : auto; } --> </style> </head> <body> <div id="content"> コンテンツ </div> ------------------------------- これでどうでしょか？ あとブラウザによってはmarginを利用したセンタリングができないものがあるので、bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメします。
お礼
hamueさま、早々のアドバイスありがとうございます。 >{}が閉じられていません。 ><style type="text/css"> こちらは私の記入漏れでした。 正直うまくはいっていないのですが、 >あとブラウザによってはmarginを利用したセンタリングができないものがあるので、 こちらの記述が気になりました。 それで >bodyのtext-alignをcenterに、div#content側でtext-alignをleftにすること（センタリングされたテキストを左寄せにする）をオススメします。 この方法を試すと、うまくいったのですが、idをいくつか埋め込んでいるので正直テキストをすべて左寄せにするのは面倒ではあります。 しかし仕方がないのですかね。 教本を読んで練習中ですが、この教本のソースをそのままブラウザで見てみると、うまくセンタリングされていますが、私がビルダーを使って同じソースを書いてもうまくセンタリングされません。 なにか原因があるのでしょうか、 もう少しがんばってみます。 またアドバイスがありましたら、よろしくお願いします。
お礼
返事が遅くなりました。スミマセン いろいろ試してみたのですが、この方法が確実のようです。 アドバイスありがとうございました。