CSSでのブロックレイアウトがうまく確認出来ません！！

質問

かれこれ三時間が過ぎてしまいました。
現在CSSを使ってブロックレイアウトをしているのですが、なかなかうまく行きません！ブラウザごとに違って見えちゃいます。

質問1です。

上から3つのブロックを作っています。
ブロックごとにボーダーの色などを指定するのですが、ブラウザによって表示が違ってしまいます。ボーダーなどの指定ってブラウザによって非推奨とかあるのでしょうか？

質問2です。

こちらもブラウザの問題なのですが、InternetExplorerだときちんと中央に表示されるのですが、netscapeなどでは左によってしまいます。ブロックなどの表示位置をCSSで指定できないのでしょうか？やはりHTML部分に、直接センター表示を明記した方がいいのでしょうか？

宜しくお願いします。

回答No.5

coder · ベストアンサー

えと、これは単に<br>です。
それにスタイルシートでclear:bothしてるだけ。
ただこれははっきり言っちゃうと文法違反です。
clear:bothはブロックレベルにしか使えない（BRはインライン）んだけど、上手く表示されちゃうので結果オーライみたいな。
あとは、空のdivを作ってそこでfloatをクリアしたりとかでもできる。

ようは、floatしてるブロックレベルの後に、floatしてないものがあって、そこでfloatをクリアするということです。

たぶん、これでも良く分からないなら、本を買って勉強した方がいいです。
スタイルシートはまだまだ理屈では上手くいかない部分やブラウザ対応が必要ですし、HTMLの知識もしっかりしたものがないと組めません。
cssも辞書なくてもすらすら手書きできるくらいがベストです。

頑張ってね。

お礼

coderさん本当に有難うございました。

CSSもまだまだ発展中ですし、追いかけるのが精一杯です。色々分からないことが沢山ありますが、がんばって勉強していきたいと思います。

回答No.4

coder

1.「borderについて」
borerは初期設定では「none」になってますので、0であるならばいらないです。
---------------------------------------
2.「float時の背景について」
例えば、
<div style="width:500px;background:#cccccc;">
<div style="float:left;width:300px">左側</div>
<div style="float:right;width:200px">右側</div>
</div>
これだと、最初のDivの背景がしっかりと続いてくれないですよね？この理由というのは、
「必要な高さ算出に参考にするのはfloatしていないインライン要素とブロックレベル要素の高さであるということです。」だからなんです。
だからfloatされた左のDivと右のDivが親要素であるDIVの高さに影響を与えることができず、#000000の背景がfloatしたdivの下端まで伸びないんです。

これを解決するには、
<div style="width:500px;background:#cccccc;">
<div style="float:left;width:300px">左側</div>
<div style="float:right;width:200px">右側</div>
<br style="clear:both;">
</div>
みたいにfloatの後にbrでclear:bothしてください。こうやってfloatを解除してあげないければ親要素の背景は流れないんです。

お礼

coderさん、本当にたびたびありがとうございます。

>これだと、最初のDivの背景がしっかりと続いてくれないですよね？

まさに、その通りです・・・、
>「必要な高さ算出に参考にするのはfloatしていないインライン要素とブロックレベル要素の高さであるということです。」だからなんです。

こんな暗黙があったなんて、全然知りませんでした。
ちなみに<br style="clear:both;"></div>こんなタグもはじめてみました。brって強制開改行のｂｒなんでしょうか？？不思議なタグです。

もう少し調べてみたいと思います。

回答No.3

coder

なんかちょっと↓で誤解をまねく書きかたしてしまったので訂正。text-alignは、インライン要素に対しての指定です。

あと、忘れてた。borderは1pxって指定すれば太さはダイジョブだと、思う。。
このborderで気をつけること。～IE5.5以前では、borderやpadding、marginに0以外の値を設定すると、他のブラウザと幅の計算の仕方が変わってきます。
詳しくはネットで、ボックスとか検索するといっぱいヒットすると思うから、調べてみて。

あと、いくつか気づいた点。
1)operaのボディの余白は、marginとpaddingを共に0にしないと消えません。なので、bodyの余白の指定は、必ずmargin:0;padding:0;みたいにして下さい。
2)floatしたものや絶対配置したものを親要素（入れ子にしてるおおもと）の中に入れても、親要素の高さに影響しません。つまりこのままでは上手くborderあるいは背景が流れません。floatしたものの後にfloatしないものが来ない場合は、だからfloatしたやつの最後に<br style="clear:both">って入れてください。それでダイジョブ。
3)footerのところ。floatを解除なら、clear:bothなり、clear:leftを入れよう。

参考URL：

http://www.mozilla.gr.jp/standards/webtips/index.html

お礼

coderさん、ご丁寧にありがとう御座います。

>このborderで気をつけること。～IE5.5以前では、borderやpadding、marginに0以外の値を設定すると、他のブラウザと幅の計算の仕方が変わってきます。

なるほど、そのような決まりがあるのですね！ボーダーを使わないレイアウトでも背景と同系色でボーダーを指定しておいた方がいいのでしょうか？

>1)operaのボディの余白は、marginとpaddingを共に0にしないと消えません。なので、bodyの余白の指定は、必ずmargin:0;padding:0;みたいにして下さい。

operaですか、対象にしたことも無かったのですがこれからは気にしてチェックしてみたいと思います。

>だからfloatしたやつの最後に<br style="clear:both">って入れてください。それでダイジョブ。

すみません、ここのところがよく分からないのですが・・・、確かに現在ではfirefoxでみると親のボックスmainboxの高さがつぶれて変な表示になっています。
具体的に、"clear:both"はどこに入れたら良いのでしょうか？

回答No.2

coder

text-align:centerというのは、そもそもブロックレベル要素の位置指定をするのに使うものでは、ありません。テキストを真中揃えしたりするのに使うものです。IEが真中によってしまうのは、IEのバグです。
その他のブラウザでも真中寄せするには、bodyに今回のようにtext-align:center；
さらに真中寄せするdiv（bannerとmainbox）に対して、marign:0 auto;みたいな形で、左右のmarginを共にautoにして下さい。これで寄ります。

ちなみにCSSデザインをするなら、まず検証の基準ブラウザにIEを使うのをやめるべきです。IEはミスに対して寛大すぎるので、今回のような間違った記述でもうまくいってしまいます。その結果他のブラウザはめちゃめちゃってなってしまいます。第一の検証はfirefoxとか最近のブラウザを使い、その上で、最後にIE検証がベストだと思います。

あとcssデザインだと、どうしても理屈ではないエラーも出てきます。ですので、それぞれのブラウザにだけ適用させるという方法も必要になってきます。
例えば、～IE5.5とIE6（互換モード）は、ボックスの概念というCSSには欠かせないものを間違えて解釈しています。その為にIE5.5だけにCSSを適用させる方法も必要になってきます。その辺も勉強しないと、ブラウザごとにずれが出るかと思います。

お礼

coderさん、ありがとう御座います。

>text-align:centerというのは、そもそもブロックレベル要素の位置指定をするのに使うものでは、ありません。テキストを真中揃えしたりするのに使うものです。IEが真中によってしまうのは、IEのバグです。

そうですか・・、バグなんですね。初めてしりました。私はバグに合わせていたんですね。

>bodyに今回のようにtext-align:center；
さらに真中寄せするdiv（bannerとmainbox）に対して、marign:0 auto;みたいな形で、左右のmarginを共にautoにして下さい。これで寄ります。

bodyによく書く、<div align="center">という物を記述すると真ん中に寄るのですが、これは使ってもいいものなのでしょうか？出来る事ならbodyには書きたくないですよね？？

>第一の検証はfirefoxとか最近のブラウザを使い、その上で、最後にIE検証がベストだと思います。

そうなんですか、IEばかり見ていたので・・・。
逆にそのfirefoxとかでうまく表示されればnetscapeやIEでも正しく表示されるのでしょうか？

>あとcssデザインだと、どうしても理屈ではないエラーも出てきます。ですので、それぞれのブラウザにだけ適用させるという方法も必要になってきます。

そうなんですか、ものすごく奥が深いのですね。ブラウザごとに対応ですか、調べてみたいと思います。

回答No.1

quads

まず、ボーダーの色指定。などというのはどのような指定方法なのでしょうか。
実際のページを見せていただければよいのですが、ソースの提示程度はしていただかないと回答が難しいです。

次に、IEだと思い通りに表示されるというのは、HTML文法的には間違っていると思われます。
もう少しソースの情報がないと的確なアドバイスが出来ない気がします…。

http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html
http://jigsaw.w3.org/css-validator/
一度検証されてみてはいかがでしょうか。

お礼

quadsさん、ありがとう御座います。

>ソースの提示程度はしていただかないと回答が難しいです。

そうですよね、今少しかまっていた物を載せてみたいと思います。HTMLとCSSをお恥ずかしいですが掲載いたしますので、ご指摘等宜しくお願いいたします。

まずはHTMLです。

<body>

<div id="banner">
<p>ここがバナーでーす。</p>
</div>

<div id="mainbox">

<div id="leftbox">
<p>ここが左側です。</p>
</div>

<div id="centerbox">
<p>ここが中央です。</p>
</div>

<div id="rightbox">
<p>ここが右側です。</p>
</div>

</div>

<div id="footer">
<p>ここがフッターです。</p>
</div>

</body>

次にCSSです。

body {
font-size: small;
text-align: center;
margin: 0px;
}
#banner {
height: auto;
width: 700px;
border: thin solid #FF33FF;
}
#mainbox {
height: auto;
width: 700px;
border: thin solid #00FF00;
}
#leftbox {
font-size: small;
height: auto;
width: 200px;
border: thin solid #000099;
text-align: left;
float: left;
}
#centerbox {
font-size: small;
width: 300px;
border: thin solid #FFFF33;
float: left;
text-align: left;
}
#rightbox {
font-size: small;
text-align: left;
float: left;
border: thin solid #FF0000;
width: auto;
height: auto;
}
#footer {
height: auto;
width: 700px;
border: thin solid #CC33CC;
}

以上になります。宜しくお願いします。