Takazudo Clipping*

こーいうものを作ろうとする時、CSSでやろうとすると、左右のブロックをfloat:right, leftとかやって配置しますが、これはあまり汎用性のある方法とはいえません。なんでかというと理由は3つ。

1つ目は、imgをfloatさせると、テキストがその下に回りこんでしまうというのが1点。回り込ませたいならいいですが、テキストを回り込ませないでやりたい場合が殆どなので。

2つ目は、回り込ませないでやるとしたら、左右のfloatさせたdivにwidthを指定しなければなりません。そうすると、例えば、画像の幅が200pxであれば、そのdivには200pxのwidthを、画像幅が300pxであれば、300pxのwidthをそのdivに指定しなければならなくなってしまう。これでは、画像の幅が異なるたびに左右に振り分けたのdivにwidthを指定しなければならなくなってしまうため、かなり面倒なことに・・・。

3つ目は、そもそもその種の方法では、リキッドレイアウトでは基本的にムリ。

やりたいのは、画像の横は10px空けて、残りをテキストの領域としたいといったようなこと。コレを実現する最も現実的な方法は、tableを使うこと。tableなら、伸びたり縮んだりするんで、画像じゃないセルのほうにwidth:100%なりを指定しておけば、テーブルレイアウトアルゴリズム上、画像の幅がどうだろうが関係ないはずですので。

<table>
    <tr>
        <td><img src="img.jpg" alt="" /></td>
        <td width="100%">
            <p>test test test test test</p>
        </td>
    </tr>
</table>

しかし、これは、マークアップ上、あまりやりたくないことです。
表でもないのにtableを使っているからです。本当であれば、tableは、表としてマークアップしたいものに使うべきです。画像ブロックは表ではないです。

<div class="ImgBlk R">
	<div class="Img"><img src="img.jpg" alt="" /></div>
	<div class="Txts">
		<p>test test test test test </p>
	</div>
</div>

<div class="ImgBlk L">
	<div class="Img"><img src="img.jpg" alt="" /></div>
	<div class="Txts">
		<p>test test test test test </p>
	</div>
</div>

これだけで実現できたらいいのに・・・と思ってたら、滅茶苦茶悩んだ末、なんとかできた。

• フレキシブルな画像ブロックサンプル

CSSはとび先参照ですが、軽く解説すると、まず、display:table関係に対応しているSafari,firefox,Operaにはdisplay:tableを使って、divをtableだのtable-cellにして、テーブルと同様の効果を実現。しかし、IEは、7になってすらdisplay:table関係に対応していないため、IE8未満に対し、条件分岐コメントでfloatやhasLayoutの特性を利用し、同様の効果をどうにかこうにか実現させる。

これならIE8が出た場合、そいつらは当然、display:table関係に対応していないなんて馬鹿なことはありえないハズですので、現状のSafari, Firefox, Operaと同様の解釈がされるはずなので問題ないでしょうということです。

Safari2, Opera8.54, IE5.5、IE6, IE7, Firefox2で動作を確認。
ただ、expression()を使っているので、IE5.5, IE6, IE7でjavascriptがoffの環境では、キャプションが長くなると、その分、画像エリアの幅がでかくなってしまいます。Mac IEではだめでした。でも、ブロックが左右に分かれず、連続して並ぶ形になるので、情報の取得上問題は無いです。

hasLayoutって何？意味わかんないという場合はMSDNや以下のエントリを参照

• MSDN - HasLayout Overview
• IE7のズーム機能でバグる | Takazudo Clipping*

条件分岐コメントって何？という場合は以下のエントリを参照

• 100%安全なCSS Hack for IE | Takazudo Clipping*

参考

• CSS2仕様書 - The CSS table model