この方法とテーブルの違い
SEO対策になる…左にメニュー、右に本文というレイアウトの場合、
テーブルだとどうしてもメニューが先に記載されますが、この方法だとメニューを後から記載でき、
本文がHTML上部に来ます。
レイアウトの変更が楽…float部分を入れ替えるだけで、左右の入れ替えができます。
転送量が減る…上手に書けばテーブルに比べてページ容量が１／３ぐらいになる場合があります。
[関連項目] floatはちゃんとclearしましょう
[関連項目] floatの親ボックスの背景を表示するには
[関連項目] floatのmarginが2倍になるときの簡単な回避方法
フロートの概念
ページを２カラムにする方法
HTML
〜〜〜〜〜
</div>
<div id="place2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>
空divはあまりよくないので<br />を入れて、スタイルシートで隠します。
スタイルシート
float:left;/*左に寄せます*/
width:400px;/*floatを使うときは必ず幅を指定します*/
}
#place2{
float:right;/*右に寄せます*/
width:400px;
}
.clear {
clear: both;/*floatの影響をクリアします*/
font-size: 0;/*以下は<br />を隠します*/
line-height: 0;
height: 0px;
visibility: hidden;
}
ページを３カラムにする方法
これは上の２カラムにする方法を応用するとできます。
２カラムの中に２カラムを作るイメージです。
HTML
<div id="place1">
〜〜〜〜〜
</div>
<div id="place2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>
</div>
<div id="bplace2">
〜〜〜〜〜
</div>
<div class="clear"><br /></div>
スタイルシート
float:left;
width:200px;
}
#place2{
float:right;
width:400px;
}
#bplace1{
float:left;
width:600px;
}
#bplace2{
float:right;
width:200px;
}
.clear {
clear: both;
font-size: 0;
line-height: 0;
height: 0px;
visibility: hidden;
}
height:100%;として領域の下を揃えるには…
[関連項目] テーブルで高さ100%にできない
height:〜〜%;の正しい仕様[CSS2の仕様書]
包含ブロックの高さに対する割合を指定する。 包含ブロックの高さが明示されておらず、内容領域の高さに依存していれば、'auto'として解釈する。
とあります。
つまり領域（子領域）を縦いっぱいにしようとするには、その外側の領域（親領域）のheightが指定されていないとできません。
また親領域height:auto;であった場合には、子領域をheight:100%;と指定してもheight:auto;と解釈されます。
対応策としては親領域のheightをauto以外の%なりpxなりで指定します。
またこれと同じ問題でbody内に<div style="height:100%;">〜〜</div>を子領域としてではなく単体で指定した場合、DOCTYPE宣言によって解釈が変わります。（表示が変わります。）
（正確にはこの場合、divはbodyの子領域ですが）
DOCTYPE宣言について
互換モードであれば、ブラウザの表示面を親要素の高さであると拡大解釈しするため、div要素の高さは下まで広がります。
標準準拠モードではheight:auto;と解釈されます。
ではこの対策は…
ルート要素の包含ブロック（これを初期包含ブロックと呼ぶ）はUAが定める。[CSS2の仕様書]
とあります。
height: 100%;
}
つまりdivの親要素はbody、bodyの親要素はhtmlということで、htmlとbodyの両方を100%と指定するのです。
背景色を偽装して下揃えになっているように見せる方法
い
う
え
お
[ソース]
<div style="width: 50%;background-color: #999;"><br />
<div style="width: 50%;float: left;">あいうえお</div><br />
<div style="margin-left: 50%;background-color: #ccc;">あ<br>い<br>う<br>え<br>お</div>
</div><br />
</div>
[関連項目]floatはちゃんとclearしましょう
△上に戻る
