回り込みの設定

画像を文章の左右に回り込ませる例を取り上げます。実際には画像以外のものを回り込ませることもできます。

目次

• 回り込み
• 回り込みの解除

回り込み

プロパティ	float
意味	回り込みの設定
値	left, right, none

文章の右や左に画像が配置されているのを見たことがあると思います。floatプロパティを使うと、画像に限らず段落・表・リストなどなど、何でも回り込みを設定できます。

floatプロパティを使ってみましょう。img要素に対してfloat: rightを設定すると、画像が右側に配置され、続く文章はその左側に流れ込みます。

.figure { float: right; }

<p>
  <img src="star.png" alt="★" width="128" height="128" class="figure">
  img要素にfloat: rightを設定しています。
  テキストの右側に画像が回りこみます。
<p>
<p>
  画像がはみ出している場合、次の段落の右側にも回りこみます。
</p>

回り込みの解除

プロパティ	clear
意味	回り込みの解除
値	both, left, right, none

上の例では画像が上からはみ出している場合に、次の段落でも画像が右側に置かれ、文章が左側に流し込まれます。これを解除するにはclearプロパティを使います。clear: bothとすると、画像が段落の右側に回りこまなくなります。

.figure { float: right; }
.clear { clear: both; }

<p>
  <img src="star.png" alt="★" width="128" height="128" class="figure">
  img要素にfloat: rightを設定しています。
  テキストの右側に画像が回りこみます。
<p>
<p class="clear">
  この段落のp要素にはclear: bothを設定しています。
  この段落には画像は回り込みません。
</p>

まとめ

• float:leftで左に回りこみ、float:rightで右に回りこむ
• clear:bothで回り込み解除

とうとうCSS第2部まで終了しました。ここまで来ればホームページの作成に取り掛かってもほとんどほとんど問題ないと思います。「HTMLの知識をさらに深めたい」って人はHTML第3部へGO！

Information