このコンテンツも、いよいよ佳境です。
ここで紹介する、タテヨコに段組する方法を、マスターすれば、
スタイルシートでのレイアウトが、自由にできるようになるんじゃないかと思います。
タテヨコの段組とは、
前のページで紹介した、
横に段組したボックスを、 縦に並べていくことです。
それでは、順を追って、解説していきます。
まず、スタイルシートを定義します。
定義方法は、ＣＬＡＳＳセレクタを使用した方法。
「.box1」と「.box2」と「.box2」と「.box4」（赤・青・黄・緑）は、前のページで定義したボックスと同じです。
注目してほしいのは、「.space」。
赤い太字で書いてある、「 clear属性 」が、タテヨコの段組のポイントです。
この属性は、「 float属性 」によって、指定された、 回り込みを解除する 、指令を出してくれます。
図の値は「 left 」で、これは、 左側の要素に対する回りこみを解除する 、値です。
他にも、「 both 」、左右の回りこみを解除する、
「 right 」、右側の要素に対する回りこみを解除する、
「 none 」、指定なし、
があります。
なんか、どの値をつかえばいいか、わからない時は、
「both」を入れておけば、機能しますので、利用してみてください。
この属性により、回りこみを解除してあげることで、ボックスを１段、下に配置することができます。
解除しないと、１つ前のボックス（ここでは、box2）の「float属性」によって、
回りこみが発生してしまうので、いつまでたっても、タテヨコの段組をつくることができません。
それでは、つぎは、ＨＴＭＬ部分のソースを、お見せします。（body部分だけ抜粋）
「box1」と「box2」は、ふつうに、横に段組されてます。
それから、「space」（紫）で、前で設定された、段組を解除して、
そして、「box3」、「box4」（緑色）で、再び段組をしています。
このようにして、タテヨコの段組をつくっていくわけです。
つまり、
ヨコの段組を１行設定したら、
一旦解除してあげる
ということが、ポイントですね！
それから、「 clear属性 」ですが、これは、
横に段組する場合だけでも利用したほうが、レイアウトがうまくいきくと思います。
数ページにわたって長い説明をしてしまいましたけど、いかがだったでしょうか？
ちょっと、説明下手なところもありますが、
スタイルシートによる、レイアウトは、
この段組ができるようになることで、格段にクオリティが上がります。
はっきりいって、まだ、ちんぷんかんぷんかもしれません。
でも、次の練習問題を順にこなしていけば、
自然と身についていくので、ぜひチャレンジしてみてください。
