さて、レイアウトの第２段階。タテヨコの段組を練習してみましょう。
タテヨコの段組は、
<DIV>をタテヨコに段組していこうで解説してますので、
不安な方は、そちらを参考にしてみて下さい。
それでは、
前のページでつくった、ヨコ４つの段組を、
１列下に増やしてみてください。
順番は、
１列目 ボックス１｜ボックス２｜ボックス１｜ボックス２
２列目 ボックス２｜ボックス１｜ボックス２｜ボックス１
となるように、タテヨコの段組を定義してください。
ボックス１
ボックス２
ボックス１
ボックス２
ボックス２
ボックス１
ボックス２
ボックス１
.box1{
width: 200px;
height: 100px;
background-color: #FFCCCC;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #66CCFF;
float: left;
}
.kaijyo{
clear: left;
}
段組するボックス１、２は、特別な変化はありませんが、
タテヨコの段組をするための必需品、
段組解除用のボックスを新しく定義してあげる必要があります。
上の、.kaijyoのことです。
ここで、使ってるclear属性は、float属性で定義された回りこみ指定を解除する働きをもってます。
くわしくは、
<DIV>をタテヨコに段組していこうで解説しております。
そして、気になるHTMLソース部分はというと、
<BODY>
<div class="box1"> ボックス１</div>
<div class="box2"> ボックス２</div>
<div class="box1"> ボックス１</div>
<div class="box2"> ボックス２</div>
<div class="kaijyo"></div> /*ここで段組を一旦解除してる*/
<div class="box2"> ボックス２</div>
<div class="box1"> ボックス１</div>
<div class="box2"> ボックス２</div>
<div class="box1"> ボックス１</div>
</BODY>
こんなふうになってます。
できましたか？
これができたら、きっとたのしいですよ♪
