DIVボックスを横に並べる方法
調べてみるとわかるんもんですね。DIVボックスを横に並べる方法は、非常に難しいと思い込んでましたが、普通に簡単でした。ボックス系を横にレイアウトしたい場合は、どうしてもTABLEを使ってましたが、今後はCSSで行けそうです。
DIVボックスのレイアウト方法ですが、ポイントはHTMLで言うところの「ALIGN」の考え方です。CSSでは、言葉が変わって「FLOAT」になります。よく似た同じ役割です。HTMLより、レイアウト的な融通がききますね。
例えば、よく使うのが、IMGのALIGNです。
こんな感じ↓
このように、「ALIGN=LEFT」にすると、画像を左寄せにして、次の内容（文字等）をその隣から配置することができます。これをクリアーするのは＜BR CLEAR="LEFT"＞でしたね。
この例の場合は、「画像」「テキスト」という配置になりましたが、これをDIVボックスでやる場合は、次のように記述します。
＜DIV STYLE="FLOAT:LEFT"＞ボックスA＜/DIV＞
＜DIV STYLE="FLOAT:LEFT"＞ボックスB＜/DIV＞
ボックスAを左詰め、ボックスBも左詰め。
結果以下のようなレイアウトにできます。
今度は、ボックスBを右寄せにします。
「FLOAT:RIGHT」と変えるだけでOKです。
ちなみに、IMGタグのALIGNと同じように、右詰、左詰めの命令を解除してやらないと、その後のコンテンツはすべて、LEFTやらRIGHTの命令にしたがってしまいますので、＜BR CLEAR=LEFT＞と同じように、以下のコンテンツは「CLEAR：BOTH」と入れて命令を解除します。
＜div style="clear:both;"＞＜/div＞
TABLEの場合、各セル（TD～TD）は同じ形状になりますが、DIVボックスを使った場合は、それぞれのボックスの大きさから、位置、色まで自由に変えられます。
というようなことが、分かりだすと面白いですね。でも、ウェブクリエーターやらウェブ制作者になるつもりは、毛頭ないので、もっと調べたい気持ちは抑えて、任務完了です。
こういうこともできる！
でも、これ以上、首をつっこむのは！
