このページでは、
<ＤＩＶ>を横に段組していく方法を紹介します。
<ＤＩＶ>の特徴は、前のページで説明したので、
まだ見てない方は、そちらを見てからでお願いします。
さて、前のページで、<ＤＩＶ>はちゃんとした設定をしないと、
横に並べることができない、ということを紹介しました。
でも、ちゃんとした設定といっても、
たった1つの属性を、書き込むだけなので、
かんたんなんです。
ここでは、スタイルシートの定義方法のなかで、
もっとも一般的な、「ＣＬＡＳＳセレクタ」をつかって、段組していきます。
では、とりあえず、
２つの<DIV>を、横に並べてみましょう。
なぜこのように、横に段組できるかというと、
「box1」と「box2」で定義している「
float属性 」のおかげです。
この、 float属性 は、
要素の配置と回り込みを指定するための属性 ですので、
この場合、「
float:left 」と定義することで、
「
自分を、左端に配置して、続く要素を、自分の右側に回りこませる 」
という、指定をしていることになります。
スタイルシートでの脱テーブルレイアウトは、この「float属性」を利用して、つくります。
1つの属性を、加えるだけなので、案外かんたんですよね？
また、ボックスの横幅を、 「width属性」で必ず指定 してあげてください。
横幅指定しないと、うまい具合にならないので、ちょっと気をつけて下さいね。
これは、「px」でも「%」でも、両方をあわせてもＯＫですので、
あなたのサイトにあった、サイズを指定してあげてください！
「float属性」の値は、ここで指定したような、「
left 」と、
「
right 」、（ 自分を右端に配置して、続く要素を、自分の左側に回りこませる ）
あと、「
none 」、（ 回りこみを指定しない ）があります。
状況にあわせて、つかってみてください。
つぎは、ボックスを縦と横に段組していく方法を解説します。
これを、理解すれば、いよいよ、テーブルを脱ぐことができると思います。
