デザインサンプルで学ぶCSSによるスタイリング～「floatプロパティによるレイアウト」編

CSSで作るWeb用パーツ（8）

floatレイアウトサンプル：テキストの回り込み

　それでは、実際のページレイアウトのサンプルとして、図7のようなスタイリングをしてみましょう。

図7　floatレイアウトサンプル（sample04.html）

　全体をdiv#wrapperで囲み、見出し、画像、テキストで構成されたよくあるページ構成です。最初の段落では画像を左に配置したいので、画像を囲んだdiv要素に、クラス名img_leftを指定、次の段落では画像を右に配置したいのでimg_rightを指定しました。

リスト8　画像とテキストの配置例／HTML（sample04.html）

<div id="wrapper">
<h1>floatサンプル</h1>
<h2>見出しテキスト</h2>
<div class="img_left"><img src="sample.jpg" alt="画像サンプル"></div>
<p>サンプルテキストです。～中略～</p>
<p>サンプルテキストです。～中略～</p>
<h2>見出しテキスト</h2>
<div class="img_right"><img src="sample.jpg" alt="画像サンプル"></div>
<p>サンプルテキストです。～中略～</p>
<p>サンプルテキストです。～中略～</p>
</div>

　画像を左に配置し、テキストを右に回り込ませるにはfloat:leftを指定、画像を右に配置し、テキストを左に回りこませるにはfloat:rightを指定します。画像とテキストの余白がmarginで指定します。また、見出しにはclear:bothを指定して回り込みを解除します。

リスト9　画像とテキストの配置例／CSS（sample04.html）

#wrap {
  width: 630px;
  margin: 0 auto;
}
.img_left {
  margin-right: 20px;
  margin-bottom: 20px;
  float: left;
}
.img_right {
  margin-left: 20px;
  margin-bottom: 20px;
  float: right;
}
h2 {
  font-size: 100%;
  background: #333;
  margin-bottom: 20px;
  color: #fff;
  padding: 10px;
  clear: both;
}
p {
  font-size: 90%;
  line-height: 1.5em;
}

　この時、見出しの回り込みを解除していないと、図8のように回り込みが続きレイアウトが崩れるので注意しましょう。

図8　回り込みを解除しなかった例

overflow:hidden;で画像の下にテキストが回り込まないようにする

　ここで、図9のように、画像の下にテキストが回り込まないデザインにしたい場合には、テキスト（p要素）にoverflow:hidden;を指定します。

図9　overflow:hidden;で画像の下にテキストが回り込まないようにした例

リスト10　画像とテキストの配置例その2／CSS（sample04a.html）

p {
  font-size: 90%;
  line-height: 1.5em;
  overflow:hidden;
}