- ベストアンサー
CSSで全体を中央寄せ、文字は左寄せにする方法
- CSSで全体を中央寄せにしつつ、文字を左寄せする方法について教えてください。
- body要素にtext-align: centerを設定し、h要素にtext-align: leftを追加することで、全体を中央寄せかつ文字を左寄せにすることができます。
- また、<div id='outline'><div class='content'>で要素を囲むことで、全体を中央寄せにすることもできますが、h要素のスタイルを個別に指定しないと左寄せにならないことがあります。
- necology222
- お礼率93% (134/144)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
body{text-align:center;} #outline{text-align:left;} .content{float:left;} は、CSS2.1(ベンダーが標準とみなしている仕様)だと body{text-align:center;}/* text-align:継承される 詳細度は0001 */ *#outline{text-align:left;}/* text-align:継承される 詳細度は0100 */ *.content{float:left;}/* float:継承されない 詳細度は0010 */ といういみですね。*は全称セレクタで詳細度0 このCSSにて、H1が左寄せ、H2が右寄せになるということは、H1は*#outlineにあることですね。ということは、 #outlineの内部にH1があるということです。 <body> <div class="article"> <div class="header" id="outline"> <h1>見出し</h1> </div> <div class="section" id="content"> 本文 <div id="tableConten"> 目次 </div> </div> <div class="footer2> 文書情報 </div> </div> </body> なら、 div.article{ width:80%; max-width:1200px; margin:0 auto; } だけでよい。 ★CSSの最も根幹を成すのは、プロパティではなくカスケーディングです。カスケーディングスタイルシートと言われている。カスケーディングとは、スタイルの出自、詳細度、継承、優先順位で定まります。それをきちんと理解しなければ、#outline,.contentのようなIDやclass名のみならず、要素すべてにidやclass名をつけたり、不要なdivを撒き散らすことになります。そのうえ期待したようにならない。 bodyという、もっとも上位のブロックで、継承されるプロパティをbodyというタイプセレクタで指定してますから、その子孫すべてに、原則は適用される。ついで、<div class="content">を*.content{}という、全称セレクタ(* -詳細度0000)＋クラスセレクタ(. 詳細度0010)で指定している(詳細度0010)が、その中ではtext-alignを指定していれば、それが詳細度が高いので優先されるが、指定していないので継承値が使われていると言うことです。 bodyのtext-alignを外すか、より詳細度が高いセレクタで改めてtext-align:leftを指定すればよいだけです。 bodyにtext-alignを指定するのは好ましくありません。CSSが煩雑になります。IE5用の対応だと思いますが、止めても良い。 デザインのためにclass名をつけるのは止めましょう。class名やidは、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素・・・【中略】・・・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より であって、それを使ってデザインはするけど、デザインのためにつけるものではない。 ★スタイルシートを学ぶなら、プロパティは後回しにして、何よりも先にカスケーディングを先に確実に学びましょう。 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
その他の回答 (1)
- 4017B
- ベストアンサー率73% (1336/1814)
え～っと、 body の方は何も弄らない様にして。基本的にはdiv の方に色々と設定してデザインする方向性で考えます。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta charset="UTF-8" /> <title>TEST</title> <style type="text/css" media="screen" id="my-style"> /*<![CDATA[*/ div.main-content { margin: 0 auto 0; width: 1200px; } div.main-content h1, div.main-content h2, div.main-content p { text-align: left; } /*]]>*/ </style> </head> <body> <div class="main-content"> <h1>OKWaveは素敵な質問箱</h1> <h2>OKWaveは素敵な質問箱</h2> <p>OKWaveは素敵な質問箱。</p> </div> </body> </html> ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ ～以上、だいたいこんな感じOKのはず？作例はHTML5に準拠してます。 P.S. h 要素がおかしくなるって事は、何かおかしくなる様なCSSを設定してるって事です。余計な事をしていないのなら、そもそもほとんどのタグ要素は初期設定が左揃え（text-align:left;）になっているので。
お礼
ありがとうございます、余計と思われる設定を全て外したところ、初期状態に戻りました！
お礼
言われた通り設定したところ、無事にできました！ありがとうございます！