画像の配置

文中に画像を配置するとき、従来は tableタグを駆使してレイアウトを作っていました。
文章と画像をセルの一つ一つに入れて配置していくやりかたです。

テーブルでレイアウトした例

HTML

これを、DREAMWEAVER とかの下手に優秀なソフトを使って、いきあたりばったりでガーッと作っていくと、細かいセルが複雑に結合しあったコードができます。
こうなると、各セルの幅や高さが把握できなくなってしまい、合計が合わなくていきなりテーブルが崩れたりと、修正が困難なものになってしまいます。
まぁ、毎回 Fireworks で修正していればいいわけですが、マウスで境界線を掴み損ねてへんなセルができたり、思わぬ失敗をすることが良くあるのです。

で、これをCSSに置き換えようとしたとき、

とりあえず、セルをdivタグに置き換えて・・・
div なら絶対値で場所が決められるからレイアウトも崩れないし・・・

って、やりそうになりましたが、CSSならそんなことはしなくて良いのです。

CSSでレイアウトする場合は、文章が流れていて、中に画像をおくと、その回りに文章が回り込むと考えます。

文章は、段落ごとにpタグで区切ります。
画像も、pタグで囲みます。キャプションがあれば一緒に囲みます。まだ、classやidはつけません。
（本来は div で囲むのでしょうが、なぜか Mac IE で誤動作するので、原因がわかるまでは p を使います）

次に、文章中のどのあたりに画像を置くかを決めます。
そして、画像の上端と並ぶ文章のpタグの「直前」に、pタグで囲んだ画像を移動します。
そして、画像を囲んだpタグに、classなりidなりをつけて、そのスタイルのfloat属性で回り込みを規定します。
回りこみは　float 属性です。left とすれば、画像が左に寄せられ、そのすぐ右上から、次の段落のテキストが流れます。

CSS
style1 { float: left;
}

HTML
＜ｐ　class="style1"＞＜img src="xxxx"＞＜／ｐ＞
＜ｐ＞本文が、画像の右側に回りこむ＜／ｐ＞

さて、画像が回りこむ文章に比べて縦に長いときはこれでOKですが、画像が文章に比べて縦に短くなるときは、次の段落や画像までが回りこんでしまいます。
通常のブラウザ表示では良くても、ブラウザの幅を広げるとNＧということもあります。
次の段落や画像が回りこんでほしくないときは、空のpタグをおき、これに clear属性をつけます。

CSS
style2 { clear: both;
}
HTML
＜ｐ　class="style2"＞＜／ｐ＞
＜ｐ＞ｘｘｘｘｘｘ・・・・・

すると、この後の段落は回りこまなくなります。
次の段落に直接 clear属性を適用しても良さそうなのですが、Mac IE で、
「clear属性を適用した要素の子要素には同じ方向の floatが適用されない」
というバグがあるため、うまくいきません。

CSSでレイアウトした例

HTML

float と clear は、class で汎用的なものを用意しておいて、他の class と組み合わせて使うとわかりやすいですね。

---

ちなみに、画像が重なり合って配置されるようなレイアウトなら、positionプロパティでどんどん重ねていけばいいので簡単です。
CSSを使うようになると、スライスという技術は必要なくなるかも知れませんね。