• ベストアンサー
  • すぐに回答を!

CSSのセンタリングが、「div」で何故か出来ない

  • 質問No.7786505
  • 閲覧数282
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 97% (689/704)

下記のアドレスのホームページについてです。
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~の部分から全部、自分で書いてみました。
詳しい方がいましたら、よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 45% (5062/11035)

HTMLを書いたら、まずAnother HTML Lintなどでチェックしておきましょう。
HTMLが間違っていると、期待したスタイルが適用されません。
★さすがに、今日この頃---strictで作成しましょう。Transitionalやframesetは使わない。
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」---1999年勧告

HTMLにとても多くの間違いがあります。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<mata>じゃなくて<meta>です。

※text-alignはテキストの配置です。ブロックは配置されません。(IE6にはバグもmargin:0 autoでは中央になりませんから、昔はやむなく、IEのバグtext-alignでブロックが中央に配置されてしまうを利用していました。

[HTML4.01strict+CSS2.1]
★ウィンドウ巾に関わらず常に中央に表示されます。subsectionはスマホなど小さなディスプレイでは縦に並びます。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でチェック済み
タブは_に置換してあるので戻すこと。
#mainとかleftとかrightは使うべきじゃありません。先で左右を変えてくなったらどうするのですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル0</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{background-color: #FF99CC;}
div.header,div.section,div.footer{
width:70%;margin:0 auto;min-width:0;
}
p.pr img{width:100%;height:auto;display:block;}
div.section div.section{width:50%;float:left;min-width:200px;}
div.footer{clear:left;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>大見出し</h1>
__<p>四季折々の品をお届けします。</p>
__<p class="pr"><img src="/images/1.jpg" width="787" height="300" alt=""></p>
_</div>
_<div class="section">
__<h2>What's New</h2>
__<ul>
___<li>12/11/07 モダン特集のページを追加しました。</li>
___<li>12/11/01 ラテン特集のページを追加しました。</li>
___<li>12/10/24 ポイントレッスンを追加しました。</li>
___<li>12/09/16 写真を更新しました。</li>
___<li>12/08/30 「ポジションについて」を更新しました。</li>
__</ul>
_</div>
_<div class="section">
__<h2>今月のおすすめ</h2>
__<div class="section">
___<h3>見出し3</h3>
___<p>「ウォーク」集中レッスン期間</p>
___<p>体重をしっかりと移動させましょう。</p>
___<div class="section">
____<h4>フィガー</h4>
____<ul>
____<li>オープン・ヒップ・ツイスト</li>
____<li>アイーダ(フォールアウェイ)</li>
____<li>アドバンスド・ヒップ・ツイスト</li>
____<li>クカラチャ</li>
____<li>ロープ・スピニング</li>
____<li>フェンシング</li>
____<li>リバース・トップ</li>
____<li>オープニングアウト・フロム・リバース・トップ</li>
____<li>キューバン・ロックス</li>
____<li>サイド・ステップ</li>
____<li>オープニングアウト・トゥー・ライト・アンド・レフト </li>
____</ul>
___</div>
__</div>
__<div class="section">
___<h3>見出し3</h3>
___<p>しっかりとリズムに乗りましょう。</p>
___<div class="section">
____<h4>フィガー</h4>
____<ul>
_____<li>クローズド・チェンジ</li>
_____<li>ナチュラル・ターン</li>
_____<li>リバース・ターン</li>
_____<li>コーナー・チェンジ(チェック・バック)</li>
_____<li>アウトサイド・チェンジ</li>
_____<li>ヘジテーション・チェンジ</li>
_____<li>ナチュラル・スピンターン</li>
_____<li>ウィスク</li>
_____<li>バック・ウィスク</li>
_____<li>シャッセ・フロム・PP</li>
_____<li>ベーシック・ウィーブ </li>
____</ul>
___</div>
__</div>
_</div>
_<div class="footer">
__<address>&copy; Copyright (c)2012 TITLE. ALL Right Reserved. mailto:*****</address>
_</div>
</body>
</html>
お礼コメント
thanksv

お礼率 97% (689/704)

大変、参考になりました。ご回答、ありがとうございます。
投稿日時:2012/11/08 16:35

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 55% (305/551)

なぜ、今さらTransitionalなのでしょうか?
ま、いいんですけどね。Transitionalを宣言したのですから、Transitionalにあわせて間違ったcssを書く必要があります。改善点は2点です。

●1点目(わざと間違えよう!)
センタリングでのTransitionalの特徴にブロック要素をインライン要素同様にtext-alignが効く間違った仕様と、正しくはブロック要素のセンタリングに効くはずの左右のmargin:autoが効かないという仕様があります。

thanksv さんの指定では有効なのはbody{だけで、#bodyは示されたページでは全く無効です。
body{
background-color:#ff99cc;
}
#body{/*●ここはまったく効いていない●*/
text-align:center;
margin-left:auto;
margin-right:auto;
text-align:left;
}

下記のように有効な箇所に間違っているのを承知で「text-align:center;」を加えてください。
body{
background-color:#ff99cc;
text-align:center;
}

●2点目(こちらは正しいセンタリング)
ブロック要素へのセンタリングは正しくは左右のマージンをautoにすることと同時に横幅を決めることが必要です。横幅を決めないと初期値100%が効きますので、left・rightが横幅一杯に配置され、センタリングが効いていないように見えます。例:80%なら左右に10%ずつ振り分けられます。70%なら、左右に15%ずつ……と横幅を決めないとブラウザもセンタリングしようがありません。幅によって位置が変わります。
#main{
text-align:center;/*蛇足ですが、これも効いていません。理由はleftに負けています。消されてはいかが?*/
margin-left:auto;
margin-right:auto;
text-align:left;/*蛇足ですが、これが有効です*/
width:600px;/*●ここを追加。横幅を決めます。pxでも%でも好きな幅を指定してください*/
}
お礼コメント
thanksv

お礼率 97% (689/704)

大変、参考になりました。ご回答、ありがとうございます。
投稿日時:2012/11/08 16:35
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ