ここでは段組の中に段組をしていく方法を練習していきましょう。
レイアウトするときに、とても役に立つと思います。
まず、最初に段組してほしいボックスの定義内容は、
ボックス１が、横幅200px、縦幅200px、背景色#FFCCCC。
ボックス２が、横幅300px、縦幅200px、背景色#66CCFF。
そして、ボックス１の中にネストして段組するボックスの定義内容は、
ボックス１−１が、横幅50px、縦幅50px、背景色#CC0000。
このボックスを、ヨコに４つ、タテに４つ段組してください。
それから、ボックス２の中にネストして段組するボックスの定義内容は、
ボックス２−１が、横幅200px、縦幅100px、背景色#3399FF。
ボックス２−２が、横幅100px、縦幅100px、背景色#666699。
このボックスたちを、
ボックス２−１｜ボックス２−２
ボックス２−２｜ボックス２−１
というように、交互に段組してください。
最初に定義した、ボックス１と２の背景色が、キレイに隠れれば成功です。
まず、最初の段組、ボックス１と２のスタイルシートの定義は以下の通りです。
.box1{
width: 200px;
height: 200px;
background-color: #FFCCCC;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: #66CCFF;
float: left;
}
.kaijyo{
clear: left;
}
ちゃんと、解除用のボックス（kaijyo）も定義しています。
そして、以下のように、HTMLソースに書き込みます。
<div class="box1"></div>
<div class="box2"></div>
<div class="kaijyo"></div>
このように、記述すると、
下のように、表示されます。
それから、左がわのボックス１の中に、ボックス１−１をネストして段組します。
ちょっとわかりやすくするために、最後のボックスだけはずしてみました。
HTMLソースは、以下のとおり。
<div class="box1">
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="kaijyo"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="kaijyo"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="kaijyo"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>
<div class="box1-1"></div>/*ここをはずしてます*/
<div class="kaijyo"></div>
</div>
<div class="box2"></div>
<div class="kaijyo"></div>
注目してもらいたいのは、行が変わるごとに、段組を解除しているところ。
これが、段組の中に段組するうえで、とても大切だとおもいます。（最初のうちは）
次は、ボックス２の中に、ボックス２−１，２−２をネストして段組します。
ボックス２内部だけのソースは、以下の通りです。
<div class="box2">
<div class="box2-1"></div>
<div class="box2-2"></div>
<div class="kaijyo"></div>
<div class="box2-2"></div>
<div class="box2-1"></div>/*ここははずしてあります*/
<div class="kaijyo"></div>
</div>
ちょっと、こった段組をしたいのなら、
この段組を解除するボックスを入れ忘れないようにしましょう。
あくまで慣れるまでの間ですけども。
