→簡単そうで覚える事の多い、クセ者floatの話 1日目
今は2つの小箱がピッタリ端にくっついてます。
ソースはこんな感じ。
<html>
<head>
<style type="text/css">
#box {width:320px; height:240px; background-color:#ffff66;}
#hidari {float:left; width:145px; height:220px; background-color:#ff66cc;}
#migi {float:right; width:145px; height:220px; background-color:#339933;}
</style>
</head>
<body>
<div id="box">
<div id="hidari">えにくす<br>こんにちは<br>コンテンツ</div>
<div id="migi">もょもと<br>さようなら<br>コンテンツ</div>
</div>
</body>
</html>次は小箱の周りに余白10pxをつけていきます。
cssでは小箱の外に余白をとるmarginプロパティがありますねぇ。
なので、ここではmarginプロパティを使いま…せん！
実は、marginは便利でいっぱい使いたくなりますが、floatプロパティを使っている場合、途端に扱いづらい子になるんです。
何故ならie6という化石ブラウザがあるんですが、ie6ではfloatかけた方向のmaginが倍になる、という笑っちゃうくらいアホなバグがあるんです。
そんなの別にたいした事ないよーと思っちゃうと大変。計算した綺麗なレイアウトも、プレビューすると激崩れしてるんですよ
意外とこの化石ブラウザを使っている人が多いから、無視もできない。
さすがにあと1年もすればかなり少なくなると思いますが、他の方法で回避できるなら意識しなければいけません。
なので、floatかけた小箱にはmargin左右は極力使わない方がいいです。
しかしバグるのは「floatかけた方向のmargin」だけですから、float:leftした小箱にはmargin:right指定はセーフです。逆ももちろんです。
小箱が横に3つ以上並ぶ場合はこれをつかいます。それ以外はマージン左右は避けましょう。
じゃあ何をするかと言うと、paddingプロパティを使います。
マージンは箱の外側に余白をとるのに対し、paddingは箱の内側に余白をとります。
なので、大箱のbox君にpadding指定をするのです。
すると内側に余白が出来、小箱の外側の余白と同義になります。
早速コーディングしてみましょう！
<html>
<head>
<style type="text/css">
#box {width:320px; height:240px;
padding:10px;
background-color:#ffff66;}
#hidari {float:left; width:145px; height:220px; background-color:#ff66cc;}
#migi {float:right; width:145px; height:220px; background-color:#339933;}
</style>
</head>
<body>
<div id="box">
<div id="hidari">えにくす<br>こんにちは<br>コンテンツ</div>
<div id="migi">もょもと<br>さようなら<br>コンテンツ</div>
</div>
</body>
</html>さてどうですか？皆さんは何のブラウザで見てますか？
こうなった方、IEですね！
そしてこうなった方も多いと思います！こちらはfirefox。
実はここでまたまた問題が出てくるんです。
ブラウザによって、width＋paddingの解釈が違う！
IEはwidth指定したboxにpadding指定すると、横幅に余白分を含めます。width320、padding10pxで、width320pxのまま。
Firefoxはwidth指定したboxにpadding指定すると、横幅に余白分を足します。width320、padding10pxで、width340pxに広がるのです。
height（高さ）も同様です。
もーう嫌でしょ
全部一緒にしろよって感じですよね！自分もずっと思ってます。これを解決するには、大箱のbox君に、横幅を指定しない事で解決します。
cssを組む上で、width・heightとpaddingを同時に指定しない事がとても重要です。
しかし上のコードの、id="box"のwidth・heightを消すだけだと、こうなります。
・・そりゃそうですよね・・大箱boxの横は決まってませんから、左右に伸びます。
しかも背景色が変ですねぇ。棒みたい。この問題は、次の３回目でやります。
さてじゃあどうしましょうか。
仕方ありません、一緒に指定できないなら、箱をもう一つ増やしましょう。
やり方は、
大箱boxに縦横幅を指定。さらに中箱box2を作り、marginかpadding指定する。
marginかpaddingどちらかになりますが、ここでmarginを使うと、今度はfirefoxがバグります。
firefoxだと、入れ子になったdivの中箱のmargin-topは、大箱の方に反映されちゃうのです。
もうイヤですね。嫌です。
まぁここはpaddingを使いましょう。paddingで万事解決です。やっと、形が出来上がりです。。
コードです。
<html>
<head>
<style type="text/css">
body {}
#box {width:320px; height:240px; background-color:#ffff66;}
#box2 {padding:10px;}
#hidari {float:left; width:145px; height:220px; background-color:#ff66cc;}
#migi {float:right; width:145px; height:220px; background-color:#339933;}
</style>
</head>
<body>
<div id="box">
<div id="box2">
<div id="hidari">えにくす<br>こんにちは<br>コンテンツ</div>
<div id="migi">もょもと<br>さようなら<br>コンテンツ</div>
</div>
</div>
</body>
</html>さて、疲れましたね。
今回はうまくいきましたが、次の３回目では、またきっとつまづくであろうfloatの問題を解説します。