スタイルシートで画像の回り込みを指定してみよう

 スタイルシートを使って画像の回り込みをしてみよう。

 通常、画像とテキストの関係は、下のようになる。




画像の回り込みを行わない場合

無料ソフト&無料サービス この状態が画像の回り込みをしていない状態。
 段落を指定すると、画像の下にテキストが配置される。

画像の回り込みを指定した場合

無料ソフト&無料サービス これが、画像の回り込みを指定した状態の表示。

 画像の右側(画像そのものは、左側)にテキストが配置される。

 HTMLの記述は、
<p><img style="WIDTH: 80px; HEIGHT: 355px" border="1" alt="無料ソフト&amp;無料サービス"
align="left" src="http://blog-imgs-54.fc2.com/f/s/o/fsohuto/201207031857041a3.jpg"
width="80" height="355"> これが、画像の回り込みを指定した状態の表示。</p>
<p> 画像の右側(画像そのものは、左側)にテキストが配置される。</p>

 という形になる。

 画像の位置を右側にしたい場合、align="right"

 画像が続く限り、回り込みの指定は続く。

 回りこみを解除したい場合、<P class="f-clear">で段落を指定する。