CSSでメインコンテンツをセンタリングする方法
- CSSでメインコンテンツをセンタリングする方法に関する質問です。
- センタリングには「text-align: center;」や「margin: 0 auto;」を使用しますが、body要素にも適用できます。
- 「div#wrapper」で囲ったブロックの中のテキストは「div#wrapper」の「text-align: left;」で左寄せになります。
- ベストアンサー
cssでメインコンテンツをセンタリングする方法
cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } （1）「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか？ ＞ body { text-align: center; } ＞ （2）また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか？ (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか？ 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440
- daisy8888
- お礼率48% (14/29)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （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もどうもありがとうございました。
関連するQ&A
- ページ全体をセンタリングできません
フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。
- ベストアンサー
- CSS
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSSのセンタリングが、「div」で何故か出来ない
下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ～ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE～の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい
IE６だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか？
- ベストアンサー
- HTML
- CSSの崩れについて
CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。 **html** <!-- out_wrap --> <div id="out_wrap"> <!-- inner_wrap --> <div id="inner_wrap"> <!-- left_Contents --> <div id="left_Contents"> <p>AAAA</p> </div><!-- /left_Contents --> <!-- right_Contents --> <div id="right_Contents"> <p>A</p> </div><!-- /right_Contents --> </div><!-- inner_wrap --> </div><!-- out_wrap --> **css** @charset 'Shift_JIS'; body{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; text-align : center; background : #333333; color:#4f4d45; } #out_wrap{ margin-left : auto; margin-right : auto; width : 980px; padding-top : 20px; background-color : #FFFFFF; } #inner_wrap{ margin-left : 10px; margin-right : 10px; width : 960px; } #left_Contents{ width : 650px; float : left; margin-right :10px ; line-height : 200%; text-align : left; background-color : #000000; } #right_Contents{ width : 300px; float : right; line-height : 200%; text-align : left; background-color : #999999; } ************************************************************* 右ボックスの A と打った文字が左側下にも表示されてしまいます。 marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
- CSS idセレクタについて教えてください
いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。 とある Web にあった CSS の記述で、 #contents { margin: 0px; padding: 0px; width: 800px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; background: #FFFFFF url(title.gif) no-repeat center top; height: 60px; width:800px; text-align: center; display: block; position: relative; } は理解できるのですが、左側にメニューを配置する設定に関して #contents #sidemenu { margin: 5px; padding: 0px; float: left; width: 160px; text-align: left; background-color: #FFFFFF; } となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。 <div id="contents"> あいうえお <div id="header"> かきくけこ </div> <div id="sidemenu"> メニュー </div> さらにコンテンツ </div> とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。 contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。 初歩的な質問だと思いますが、どうぞよろしくお願いします。
- ベストアンサー
- CSS
お礼
ご回答をありがとうございます。 私の全ての疑問に答えていただき、IEの各バージョンに関する対応も 教えていただいてどうもありがとうございました。 CSS2を押さえながら、CSS3も学びたいと思います。