アプリ版：「スタンプのみでお礼する」機能のリリースについて

cssで、全体を中央寄せ、文字は左寄せにする方法

解決済

  • 質問者：necology222
  • 質問日時：
  • 回答数：2件

CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。

bodyにtext-align: centerを設定し、

#outline{
width:1200px;
margin-right:auto;
margin-left:auto;
text-align:left;
}

.content{
float:left;
width: 1200px;
}

と書き、<div id="outline"><div class="content">で全体を囲みました。
すると、大方できたのですが、h要素のみずれてしまいます。
（h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・）
h要素は色とフォントサイズを指定したのみです。
CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。
どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

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-html4 … )］より

　であって、それを使ってデザインはするけど、デザインのためにつけるものではない。

★スタイルシートを学ぶなら、プロパティは後回しにして、何よりも先にカスケーディングを先に確実に学びましょう。
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
    • good
    • 0
    • 件
通報する
この回答へのお礼

言われた通り設定したところ、無事にできました！ありがとうございます！

通報する
お礼日時：2011/11/08 20:59

No.1

  • 回答者： 4017B
  • 回答日時：

え～っと、 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;）になっているので。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます、余計と思われる設定を全て外したところ、初期状態に戻りました！

通報する
お礼日時：2011/11/08 20:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報