XHTML/CSS・トップ | CSSプロパティ・目次

●画像の左右にテキストを回り込ませる

左寄せの画像 floatは適用した要素の左右にテキストまたは要素を流し込むプロパティです。指定できる値は leftおよび rightですが、none(回り込みなし)も指定できます。すべての要素に適用できますが、positionプロパティの値で適用された要素など、例外もあります。また、img(画像)のように幅を持っている置換要素以外に適用した場合は widthプロパティで幅をあらかじめ指定する必要があります。ここではimg要素へ指定した場合を解説します。なお、floatプロパティで指定した値は子要素に継承しません。

【CSS】↓

p .hidari {
  float: left;
  margin-right: 2em;
  margin-bottom: 1em;
}

 直接関係のある書式は p .hidari { float: left; } です。ここでは子孫セレクタとクラスセレクタを組み合わせた解説をしていますが、IDセレクタと組み合わせることも可能です。通常は"(親)セレクタ  (子)セレクタ"というようにセレクタとセレクタの間に半角スペースを入れます。子セレクタの対象となる親セレクタが異なるときは入れ替えてください。(例:p要素→div要素)

※子孫セレクタの解説については「子孫セレクタについて」をご参照ください。また、セレクタは要素名以外の形もありますのでここでは要素名の代わりにセレクタと称します。

【HTML】↓

<p><img class="hidari" src="sun001.jpg" width="320" height="480" border="0" alt="左寄せの画像"></p>

【解説】↓

 floatプロパティの値として leftを指定し、適用した要素(ここではimg要素)の画像を左寄せにしています。結果として、テキストが右に回り込みました。


【CSS】↓

p .migi {
  float: right;
  margin-left: 2em;
  margin-bottom: 1em;
}

【HTML】↓

<p><img class="migi" src="sun002.jpg" width="320" height="480" border="0" alt="右寄せの画像"></p>

右寄せの画像

【解説】↓

 floatプロパティの値として rightを指定して適用した要素(ここではimg要素)の画像を右寄せにしています。結果として、テキストが左に流し込まれています。

【総解説】↓

 ここではp要素の中の"hidari"または"migi"のクラス名を class属性の値として指定した img要素にCSSのスタイル(書式)を適用させています。順序としてはfloatプロパティを適用した要素の次の要素が回り込みます。なお、回り込みを指定した後にその指定を解除するには clearプロパティを利用します。

 img要素にfloatプロパティを適用した場合はある程度、すき間があったほうがみやすいのでimg(画像)とテキストとの間にマージン(margin)を指定しましたが、必要がなければマージンの指定を取り払ってください。

※"hidari"、"migi"はクラス名ですがクラス名およびID名は作者が勘案し、任意の名前を使います。使える文字は半角英数字とハイフン( - )、アンダーバー( _ )などです。ただし、クラス名やID名の先頭に数字やハイフンを使ってはいけません。また、数字だけを使ってもいけません。

【簡略】↓

 子孫セレクタを使わない方法もあります。

【CSS】↓

.hidari {
  float: left;
  margin-right: 2em;
  margin-bottom: 1em;
}

【HTML】↓

<p><img class="hidari" src="sun001.jpg" width="320" height="480" border="0" alt="左寄せの画像">回り込むテキストを記載・・・</p>

【その他】↓

 子孫セレクタを使った方法ですが、次のように単純に指定することもできます。p要素に含まれるすべての img要素にスタイルが反映されます。(その場合、HTMLのほうでは特に指定する必要はありません。)

【CSS】↓

p img { float: left; margin-right: 10px; }

XHTML/CSS・目次 | 通常画像・目次

Copyright (C) 2005 http://www.xml.vc/