- ベストアンサー
CSSでメインコンテンツをセンタリングする方法
- CSSでメインコンテンツをセンタリングする方法に関する質問です。
- センタリングには「text-align: center;」や「margin: 0 auto;」を使用しますが、body要素にも適用できます。
- 「div#wrapper」で囲ったブロックの中のテキストは「div#wrapper」の「text-align: left;」で左寄せになります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
標準or過去互換モードにもよりますが、 IE6及び5.5以下だとCSSでは、 body {text-align: center;}じゃないとセンターリング出来ないから。 ※ その他のブラウザでは、body {text-align: center;}は不要で、 div#wrapper {width: 800px; margin: 0 auto;} だけで良いです。 （２） 継承されるので出来ますよ。 ただし、本来はインライン要素に対してのセンターリングの事です。 IEが間違った解釈をする為です・・・ （３） text-align: left;以下は親要素からの継承なので、全て leftですよ。 ただし、これもIEのtableにバグがある。 ---------------- body {text-align: center;} このCSSは、IE6以下だけのブロック要素をセンターリングする為に設置しているだけで、 text-align: center;で直下のブロック要素をセンターリングして、 インライン要素もセンターリングされるので、 text-align: left; で、直下のブロック要素内を元（左寄り）に戻すって事です。 IE7でも過去互換モードなら、同じ対応が必要となります。 スターハックで対応しても良いと思いますよ。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
body{text-align:center;}は後方互換のために使われますが、その場合この属性は継承されます(Inherited:yes)から、その次のブロックレベルで戻しておかなければなりません。 'text-align' Value: left | right | center | justify | <string> | inherit Initial: depends on user agent and writing direction★ブラウザ&言語に従う Applies to: block-level elements ★対象はブロックレベル Inherited: yes ★継承する Percentages: N/A Media: visual このプロパティは、ブロックの中でインライン要素の内容をどのように揃えるかを指定する。 ^^^^^^^^^^^^^^^^ 16.2 文字を整列させる（Alignment: the 'text-align' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/text.html#alignment-prop )より ＞（2）また、「p」などのインライン要素は、{text-align: center;}を使い、「id」などのブロック要素は{margin: 0 auto;text-align: left;}を使いますすが、 pはブロック要素です。idは文書の中でリンクの終点を示す一意な要素を指定する属性です。CSSから見るときは「一意セレクタ」と考えます。 ブロック要素とインライン要素をきちんと理解しておきましょう。 <div id="wrapper">などは、あるオーサリングツールがつけてしまう意味のないidです。とても多く見受けますが、ウェブ標準的に正しいとは言いかねます。 可能な限り意味のある名称にしましょう。この場合リンクの終点でなければつけないほうが良い。HTML5だと <body> <section> <header> <h1>見出し</h1> <article> <p></p> <p></p> </aricle> </header> <section> <h2>見出し</h2> <p></p> </section> <footer> </footer> </section> </body> section{margin:0 auto;width:80%;} section section{width:100%;} とかになるはずですから、HTML4だと <body> <div class="section"> <div class="header"> <h1>見出し</h1> <div class="article"> <p></p> <p></p> </div> </div> <div class="section"> <h2>見出し</h2> <p></p> </div> <div class="footer"> </div> </div> </body> div.section{margin:0 auto;width:80%;} div.section div.section{width:100%;} と、なるはずです。きちんとセマンティック(意味のある)クラス名やidをつけること。アンカー終点でもないのにidは使わない。idを使うと詳細度がb=1になるため、継承や詳細度が使えなくなり、CSSが複雑になり記述が増えます。 ＞参考書などを見ても解りづらかったので なぜ仕様書を見ないのですか？ REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) 現在、多くのブラウザがウェブ標準としているものはCSS2.1( http://www.w3.org/TR/CSS2/ )ですがこれの邦訳はないようですが、詳細度の計算以外は大きな変更はないかと・・
お礼
ご回答をありがとうございます。 現在のwebの状況に基づいた内容で勉強になりました。 初心者なのでhtml5についてはまだこれからですが学んで行きたいと思います。
全ての元凶はIE6がまともにCSSを解釈出来ないことにあります。 CSSとして正しい姿とブラウザでの実装に差異があると こういった変な方法で対応せざるを得なくなります。 http://d.hatena.ne.jp/godric/20080731/1217513807 を参照してみてください。 1.2.3.全てについて記述があります。
お礼
ご回答をありがとうございます。 なるほど、IE6の為のハックだったのですね。 参考URLもどうもありがとうございました。
お礼
ご回答をありがとうございます。 私の全ての疑問に答えていただき、IEの各バージョンに関する対応も 教えていただいてどうもありがとうございました。 CSS2を押さえながら、CSS3も学びたいと思います。