前回に引き続き,
練習用HTML
floatプロパティを利用したレイアウトの練習に複雑なHTMLを用意する必要はありません。ボックスの配置方法さえ理解してしまえば,
サンプルとなる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を個別に指定できるように,
背景色を着けてボックスを確認
まずは,
HTMLソース
#box-A {
background-color: #333;
}
#box-B {
background-color: #99CC00;
}
#box-C {
background-color: #993399;
}
#box-D {
background-color: #CC6600;
}
表示ではボックスAが見当たりませんが,
ボックスBとCをフロート
次に,
HTMLソース
#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;
}
ブラウザの表示を確認すると