プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

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

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

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

HTMLを書いたら、まずAnother HTML Lintなどでチェックしておきましょう。


HTMLが間違っていると、期待したスタイルが適用されません。
★さすがに、今日この頃---strictで作成しましょう。Transitionalやframesetは使わない。
「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」---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. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェック済み
タブは＿に置換してあるので戻すこと。
#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>シャッセ・フロム・ＰＰ</li>
＿＿＿＿＿<li>ベーシック・ウィーブ </li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<address>&copy; Copyright (c)2012 TITLE. ALL Right Reserved. mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変、参考になりました。ご回答、ありがとうございます。

通報する
お礼日時：2012/11/08 16:35

No.1

  • 回答者： DrFell
  • 回答日時：

なぜ、今さらTransitionalなのでしょうか？


ま、いいんですけどね。Transitionalを宣言したのですから、Transitionalにあわせて間違ったｃｓｓを書く必要があります。改善点は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でも%でも好きな幅を指定してください*/
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変、参考になりました。ご回答、ありがとうございます。

通報する
お礼日時：2012/11/08 16:35

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

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

Q質問する（無料）

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

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

おすすめ情報