画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS

CSS2011年8月15日

画像をCSSで右や左に寄せ、テキストは画像の隣にレイアウトする、といった見栄えは大抵のサイトで発生しうるパーツです。基本的には画像とテキストの幅をそれぞれCSSで指定するのが一般的なコーディングです。

しかし、大規模サイトなどにおいては、画像を寄せるとはいっても、そのカテゴリやページ毎に画像の横サイズは可変するでしょう。その都度その画像のサイズに合わせたCSSを用意するのはコードが肥大化する原因にもなりますし、HTML側に記述も煩雑になります。そこで、本記事ではどんな横サイズの可変にも対応した画像／テキストのレイアウトを実現するCSSを紹介いたします。

実際のサンプルはこちら

HTML

<p class="module-title">画像左レイアウト（回り込みあり）</p>
<div class="lyt-image image-L">
<div class="image">
<p><img src="/data/tips/entry108/images/108-img-01.gif" alt="" width="260" height="120" /></p>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!-- /.lyt-image -->
<p class="module-title">画像右レイアウト（回り込みあり）</p>
<div class="lyt-image image-R">
<div class="image">
<p><img src="/data/tips/entry108/images/108-img-01.gif" alt="" width="180" height="120" /></p>
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!-- /.lyt-image -->
<p class="module-title">画像左レイアウト（回り込みなし）</p>
<div class="lyt-image image-parallel-L">
<div class="image">
<p><img src="/data/tips/entry108/images/108-img-01.gif" alt="" width="180" height="120" /></p>
</div>
<div class="column">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div><!-- /.lyt-image -->
<p class="module-title">画像右レイアウト（回り込みなし）</p>
<div class="lyt-image image-parallel-R">
<div class="image">
<p><img src="/data/tips/entry108/images/108-img-01.gif" alt="" width="260" height="120" /></p>
</div>
<div class="column">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div><!-- /.lyt-image -->

CSS

*{margin:0;padding:0;}

div.lyt-image{
width:650px;
margin-bottom:50px;
}

div.image-parallel-L .image{
float:left;
margin:0 25px 15px  0;
}

div.image-parallel-R .image{
float:right;
margin:0 0 15px 25px;
}

div.image-parallel-L .column,
div.image-parallel-R .column{
overflow:hidden;
zoom:1;
}

div.image-L .image{
float:left;
margin:0 25px 15px 0;
}

div.image-R .image{
float:right;
margin:0 0 15px 25px;
}

.lyt-image:after{
display:block;
visibility:hidden;
clear:both;
height:0;
content:" ";
}

.lyt-image{
zoom:1;
}

解説

画像を右／左に寄せたパターンに加え、テキストを回り込ませる場合と回り込ませない場合のパターンを用意いたしました。とりあえずはこちらの4パターンを用意しておけば、大抵の画像／テキストレイアウトに対応できるでしょう。画像とテキストの間のマージンは適宜カスタマイズして頂ければと思います。

コーディングの際は、下記のルールを基準にマークアップしてください。

※コンテンツ全体を括るdivには.lyt-imageを付加
※.div.lyt-imageに.image-Rもしくは.image-Lを付加することで画像をレイアウトする
※画像を回り込ませる場合は、画像は.div.imageで括り、テキストは必ず.div.imageの後に記述する
※画像を回り込ませない場合は、画像は.div.imageで括り、テキストは.div.columnで括り、必ず.div.imageの後に記述する
※画像を回り込ませない場合は、.div.lyt-imageに.image-parallel-Lもしくは.image-parallel-Rを付加することで画像をレイアウトする

ちなみにこちらのサンプルは、下記のブラウザで確認済みです。
IE6／IE7／IE8／Firefox 3.6／Safari 5

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。