回り込みと解除

今回はレイアウト関連です。
使いこなすのは非常に難しいですが、使ってみる価値は十分あります。

文章を回り込ませる

使うプロパティと値は

float:left；
float:right;
float:none;

画像にfloat:leftを指定した場合はこのように画像が左により、文章が回り込む形になります。
文章が長くなると、画像の下に表示されます。適度なスペースを空けたい場合は、画像にマージンを設定してあげてください。

画像にfloat:rightを指定した場合はこのように画像が右により、文章が回り込む形になります。
文章が長くなると、画像の下に表示されます。適度なスペースを空けたい場合は、画像にマージンを設定してあげてください。

floatを使うと段組を作ることもできます

このボックスにはfloat:leftを指定しています。 floatは取り扱いが難しく、思い通りに使うのは至難の技です

このボックスにもfloat:leftを指定しています。 firefoxで見ると、IEとは違った見え方をします。floatが難しいと言われる所以です。

応用すれば3段組を作ることも可能です。

使うプロパティと値は

clear:left;
clear:right;
clear:both;

このボックスにはfloat:leftを指定しています。

このボックスにはclear:leftを指定しています。

このボックスにはfloat:leftを指定しています。

このボックスにはclear:rightを指定しています。

このボックスにはfloat:leftを指定しています。

このボックスにはclear:bothを指定しています。

clearを使えば回り込みを解除することができます。
しかし、これもブラウザーによって解釈がビミョーに違うらしく、
NNやオペラで見ると、違ったレイアウトになります。
確実さを求めるならclear:bothの使用をおすすめします。

くどいようですが、floatを使いこなすのは難しいです。
使うときはそれなりの覚悟がいります。
しかし、トップページのような複雑なレイアウトをテーブルタグを使わずにやるためには、どうしても避けることができません。
少しでも悩みを減らすために気をつけたいことをいくつか挙げます。

新しいことが分かったら応用編の方で紹介したいと思います。