画像の下にテキストが回りこまないレイアウト

概要

画像の横にテキストがあるようなレイアウトですがテキストが画像の下に回りこまないという CSS の書き方です。float を使うと、画像の下部にテキストが流れ込みますが、この方法は、画像の下にはテキストは流れ込みません。

さらに、画像の大きさは自由に設定できて、スタイルの使い回しが可能なレイアウトです。(画像が配置されるスペースの横幅は画像のサイズにフィットします。) これにより、画像のサイズごとに class 属性を設定したりスタイルを作る必要がありません。

また、画像がない場合でも画像分が詰められて表示されます。

これを応用すれば柔軟に対応できるコンポーネントをつくることができます。

説明

display プロパティに table や table-cell を設定して実現します。構造を table 要素に置き換えて考えてみると

<table>
<tr>
<td style="width:1%;"><img src="" alt="" /></td>
<td>テキスト</td>
</td>
</table>

のようになります。

これを、display プロパティに table 関連の値を指定して table 要素を使わないで table のようなレイアウトを実現します。実際の HTML のソースコードは

<div class="item">
<p class="itemImage"><img src="" alt="" /></p>
<div class="itemText">テキスト</div>
</div>

のようになります。構造が table 要素として実現したときとよく似ています。

この構造をツリー状に表してみると、

div.item
- div.itemImage
- div.itemText

となり、親と、その子として画像の領域とテキストの領域がある状態です。

そして、この HTML のソースコードに適用されている CSS は

div.item{
	width:400px; /* 必ずwidthは指定する。(100% などでも OK) */
	display:table;
}

div.item p.itemImage{
	width:1%;
	display:table-cell;
	vertical-align:top;
}

div.item div.itemText{
	display:table-cell;
	vertical-align:top;
}

といった具合です。

ただし、display プロパティに table が設定されている状態では、table 要素と同じように margin が相殺されないので注意が必要です。また、table-cell を指定したボックスには margin が無効になりますので、table-cell を指定したボックスの余白は padding で設定します。

左右逆バージョン

画像とテキストの左右を逆にしたい場合には、direction プロパティーを利用します。

(direction プロパティーは文字表記の方向（左右）を指定するため使うためのもので、たとえば、アラビア語は右から左へ読む言語なので rtl (right to left) を指定したりします。ここでは、レイアウトに応用しています。)

direction:rtl; のように指定すれば table-cell を右から左へ流し込むことができます。

table-cell に direction を適用したサンプル

先ほどの CSS のコードを以下のようにすることで、画像と文字の左右の位置を入れ替えることができます。HTML のソースコードを変更する必要はありません。

div.item{
	width:400px; /* 必ずwidthは指定する。(100% などでも OK) */
	display:table;
	direction:rtl;
}

div.item p.itemImage{
	width:1%;
	display:table-cell;
	vertical-align:top;
}

div.item div.itemText{
	display:table-cell;
	vertical-align:top;
	direction:ltr;
}

IE 7 以下では display プロパティには table 関連の値を指定できません。

IE 6, 7 用の CSS のコード

IE 7 以下の環境には float : left; を指定した要素と、hasLayout : true の要素を横に並べることで、これが実現できます。

hasLayout が true に設定された要素は他の要素に影響されない四角の領域を作り、float が指定された要素に食い込みません。

IE 7 以下で実際に適用される CSS のソースコードは

div.item{
	width:400px; /*必ず width は指定する。(100% などでも OK)*/
}

div.item p.itemImage{
	/width:auto;
	/float:left; /* IE 6, 7 */
}

div.item div.itemText{
	/zoom:1; /* IE 6, 7 */
}

/ で始まる書き方は IE 6, 7 に有効な CSS ハックです。

IE 6, 7 用の左右逆版の CSS のコード

IE 6, 7 向けには float プロパティーを使って画像の位置を決めているので、float:leftからfloat:rightに変更するだけで画像とテキストの位置を左右逆にすることができます。

先ほどの IE 6, 7 用の CSS のソースコードを以下のように置き換えることで IE での左右逆版を実現できます。

div.item{
	width:400px; /*必ず width は指定する。(100% などでも OK)*/
}

div.item p.itemImage{
	/width:auto;
	/float:right; /* IE 6, 7 */
}

div.item div.itemText{
	/zoom:1; /* IE 6, 7 */
}

まとめ

Firefox や Safari、Opera 用のコードと、IE 6, 7 用のコードをまとめると以下のようになります。

HTML のソースコードは

<div class="item">
<p class="itemImage"><img src="" alt="" /></p>
<div class="itemText">テキスト</div>
</div>

のようにし、CSS のソースコードは

div.item{
	width:400px; /*必ずwidthは指定する。(100%などでもOK)*/
	display:table;
}

div.item p.itemImage{
	margin:0; /* table-cell で実現する場合と IE 6, 7 とで差が出ないようにmarginは0に設定*/
	display:table-cell;
	vertical-align:top;
	width:1%;
	/width:auto;
	/float:left; /* IE 6, 7 */
}

div.item div.itemText{
	display:table-cell;
	vertical-align:top;
	/zoom:1; /* IE 6, 7 */
}

とすることで実現が可能です。

動作確認用の demo

左右逆版のまとめ

HTMLのソースコードは通常版と同じままで、CSSのみを以下のように変更します。

div.item{
	border:3px solid #666;
	width:400px; /*必ず width は指定する。(100 % などでも OK)*/
	margin:0 0 1.5em;
	display:table;
	direction:rtl;
}

div.item p.itemImage{
	margin:0; /* table-cell で実現する場合と IE 6, 7 とで差が出ないように margin は 0 に設定 */
	padding:15px 15px 15px 0; /* 余白は padding で指定する */
	display:table-cell;
	vertical-align:top;
	width:1%;
	/width:auto;
	/float:right; /* IE 6, 7 */
}

div.item div.itemText{
	padding:15px; /* 余白は padding で指定する */
	display:table-cell;
	vertical-align:top;
	direction:ltr;
	text-align:left;
	/zoom:1; /* IE 6, 7 */
}

これで、画像とテキストの左右の位置を逆にすることができます。