bodyのセンタリングとwidthの指定について

解決済

質問者：t1833
質問日時：2011/04/21 22:38
回答数：2件

スタイルシートで以下のように指定しbodyをセンタリングします。

-----CCS-----
html{text-align:center;}
html,body{height:100%;}
body{
margin:0px auto;
width:580px;
text-align:left;
}

-----HTML4.01 strict-----
<html>
：
<body>
<h1>・・・</h1>
<ul>・・・</ul>
<h2>・・・</h2>
<p>・・・
<h2>・・・</h2>
<p>・・・
----------

これをwin IE6で確認すると、h2以下の内容がbodyの外（画面100%の直下）にはみ出します。
win Safari5でも同様です。
IE6では、body直下にコンテナとしてdivを置きwidthを指定してやれば解決します。
Safari5ではbody直下にコンテナとしてdivを置くだけで解決します。

なぜこのような現象が起きるのでしょうか？
htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。

h2以下が下がる原因としてh1とulとの相違点(margin-topの指定や文字センタリング)を確認し修正してみたりしましたが解決はしませんでした。
なお、フロートや固定などの表示方法は指定していません。

原因を推察できる方、ぜひ回答お願いいたします。
こういった指定をしていないか、など上記の記述が足りなければご指摘ください。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： naokita
回答日時：2011/04/22 07:18

＞htmlにtext-alignを指定したりbodyを直接センタリングしているので不安は少々あるのですが…。

何かのテクニックでなければ辞めましょう。
いや、そもそも、
HTML4.01 strictなんだからbody直下のdivから始めましょうよ。
そのセレクタを一段ずつ下げて指定した方が良いでしょう。

- 0
- 件

通報する

この回答へのお礼

＞HTML4.01 strictなんだからbody直下のdivから始めましょうよ。
やはりそれが最適ですよね。
今回はちょっとした検証のつもりだったのですが、実用的でないのは確認できましたので、終了しようかと思います。
なぜh2以下だけが、と疑問はありますが。

◇試す人も少ないでしょうが補足
私の場合、IE6ではh1以下の表示に幾分時間を要しました。

お二方、ご回答ありがとうございました。
こちらをベストアンサーとし締め切らせていただきます。

通報する

お礼日時：2011/04/22 10:53

No.1

回答者： noname#157410
回答日時：2011/04/21 22:50

Bodyのセンタリングですか？

<CENTER>　</CENTER>でくくればいいですけど。

最後の
</HTML>が抜けているだけのような気もしますが・・・・

IEは結構適当に組んでも出ますけど、ネットスケープなど、命令が違う場合もあります
<TBODY>使ったり
<ＴＲ>
<TD>
使うのも一つの解決にはなると思います。

text-align:left;　580pxの枠で左に寄せなさいと書いていますが？？

この回答への補足

お早い回答ありがとうございます。

目的はbodyそのもののセンタリングです。
通常はdivをbody直下に置き、

body{text-align:center;}/*IE対策：divをセンタリング*/
div{
margin:0px auto;/*IE以外のブラウザ：divをセンタリング*/
text-align:left;/*IE対策で指定されたセンタリングをdiv内では解除*/
}

などとしてdivをセンタリングするわけですが、bodyを直にセンタリングすることも可能だというので、htmｌとbodyにそれぞれの指定を移して検証してみたのです。
これだとbody直下に広告などが入る場合でもレイアウトとの調整が効きますので。
しかし、やはりあまり推奨される方法ではないのでしょうね。
h2以下だけが下がるのは気にかかりますが…。

htmlの終了タグですが、省略可能なものは省いてます。
念のためきちんと記述してみましたが、変化はありませんでした。

＞<TBODY>使ったり
表でもないので今回は使用しませんが、最近は疎遠にしすぎて使い方忘れていそうです（笑）