前回に引き続き、
練習用HTML
floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば、
サンプルとなるHTMLは以下の通りです。
<div id="box-A">
<div id="box-B">
B
</div>
<div id="box-C">
C
</div>
<div id="box-D">
D
</div>
</div>
CSSを個別に指定できるように、
背景色を着けてボックスを確認
まずは、
#box-A {
background-color: #333;
}
#box-B {
background-color: #99CC00;
}
#box-C {
background-color: #993399;
}
#box-D {
background-color: #CC6600;
}
表示ではボックスAが見当たりませんが、
![図1 背景色をつけてボックスを確認 図1 背景色をつけてボックスを確認](/assets/images/design/serial/01/wsd/0004/thumb/TH800_01.png)
ボックスBとCをフロート
次に、
#box-A {
background-color: #333;
}
#box-B {
background-color: #99CC00;
width: 300px;
float: left;
}
#box-C {
background-color: #993399;
width: 300px;
float: left;
}
#box-D {
background-color: #CC6600;
}
ブラウザの表示を確認すると
![図2 ボックスBとCをフロート 図2 ボックスBとCをフロート](/assets/images/design/serial/01/wsd/0004/thumb/TH800_02.png)
ついでに仕様を確認
ここで、
- フロートするボックスの合計幅が包含ブロックの幅
(内容領域) を超えた場合は、 後にフロートするボックスから下に配置される。 - フロートするボックスは包含ブロックの高さの算出から除外される
包含ブロックはフロートするボックスの親ボックス、
カラム落ちの再現
先ほどのプレビュー: ボックスBとCをフロートを表示し、
ボックスAの横幅をフロートする二つのボックスが収まりきらない値に設定しても同じ状態になります。
- ボックスAに小さな横幅を指定してカラム落ちさせる
- サンプル: preview3.
html
![図3 ボックスAに小さな横幅を指定してカラム落ちさせる 図3 ボックスAに小さな横幅を指定してカラム落ちさせる](/assets/images/design/serial/01/wsd/0004/thumb/TH800_03.png)
包含ブロックがフロートするボックスを高さの算出に用いない仕様の再現
この状態のときにもう一つ注目してほしいのは、
ためしに、
- ボックスAの高さがボックスBを無視している状態
- サンプル:preview4.
html
![図4 ボックスAの高さがボックスBを無視している状態 図4 ボックスAの高さがボックスBを無視している状態](/assets/images/design/serial/01/wsd/0004/thumb/TH800_04.png)
clearプロパティを指定
包含ブロックがフロートするボックスを高さに含めないと、
これを解決するためには、
#box-A {
background-color: #333;
border: 5px solid #000; /*表示確認のために枠線を引いた*/
}
#box-B {
background-color: #99CC00;
width: 300px;
float: left;
}
#box-C {
background-color: #993399;
width: 300px;
float: left;
}
#box-D {
background-color: #CC6600;
clear: both;/*floatによる左右への流し込みを解除*/
}
![図5 ボックスDにclearを指定 図5 ボックスDにclearを指定](/assets/images/design/serial/01/wsd/0004/thumb/TH800_05.png)
clearの指定されたボックスDはフロートしたボックスの下に回ることになり、
clearを指定できるボックスが無いとき
文書構造によっては、
このテクニックに関してはここでは解説を省かせていただきますが、
最後に
floatプロパティを利用したレイアウトの手法は、
『実践Web Standards Design』
![図6 サンプルサイトのレイアウト 図6 サンプルサイトのレイアウト](/assets/images/design/serial/01/wsd/0004/wsd00.png)
中央部分のコンテンツ領域をボックスAとしたとき、
![図7 包含ブロックAの中でボックスB,Cがフロート 図7 包含ブロックAの中でボックスB,Cがフロート](/assets/images/design/serial/01/wsd/0004/wsd01.png)
上図、
![図8 包含ブロックAの中でボックスB,Cがフロート、その後ボックスDがクリア 図8 包含ブロックAの中でボックスB,Cがフロート、その後ボックスDがクリア](/assets/images/design/serial/01/wsd/0004/wsd02.png)
さらに、
![図9 包含ブロックAの中でボックスB,Cがフロート 図9 包含ブロックAの中でボックスB,Cがフロート](/assets/images/design/serial/01/wsd/0004/wsd03.png)
この例でもわかる通り、
floatプロパティのテスト問題集
以前、
今回解説した手法だけでは解答出来ない問題も含まれておりますが、