はじめてのWebデザイン『HTML・CSS』入門

3-11. 指定した要素を回り込みさせる(float・clear)

文章の途中に画像などがある場合、その画像を回り込んでテキストを表示するために「float」というCSSプロパティを使って、要素の位置を左や右に指定して読みやすいレイアウトに変更することができます。「float」の使い方と、回り込みを解除するためのCSSプロパティ「clear」についても一緒に解説します。

  • HTML・CSS
  • Webデザイン

公開日:2019/06/22最終更新日:2019/06/22

スポンサーリンク

1.要素の回り込みを指定する「float」

「float」は要素を浮かせて左右のどちらかに寄せることができるCSSプロパティです。指定した要素のあとに続く要素は右か左に回り込みます。

サンプルのHTMLを見てみましょう。

サンプルHTML:

<p>
      <img src="cat.jpg" width="200" height="200">
      これは猫の画像です。この猫の画像の右に、文章が回り込むようにしてみましょう。
</p>

プレビュー:

何も指定をせずに画像のあとに文章が続くと、画像の右側に大きな空白ができてしまいます。

そこで画像に対してfloatをleft(左)で指定してみます。

サンプルCSS:

img { float : left ; }

プレビュー:

画像が左、右側に文章が回り込みました。

 

続いて画像に対してfloatをright(右)に指定してみます。

サンプルCSS:

img { float : right ; }

プレビュー:

画像が右、左側に文章が回り込みました。

 

文章が長く、画像の高さを超えると、横幅いっぱいまで文章が表示されます。

2.回り込みを解除する「claer」

「clear」は「float」による回り込みを解除するためのCSSプロパティです。floatと同様に「left」「right」、そしてclearのみの値として「both」が指定できます。

サンプルのHTMLを見てみましょう。

サンプルHTML:

<img src="cat.jpg" width="120" height="120">
<img src="dog.jpg" width="120" height="120">
<img src="hamster.jpg" width="120" height="120">

サンプルCSS:

img { float : left ; }

プレビュー:

3つの画像のうち、最後のハムスターの画像だけ、回り込みを解除してみましょう。

サンプル HTML:

<img src="cat.jpg" width="120" height="120">
<img src="dog.jpg" width="120" height="120">
<img src="hamster.jpg" width="120" height="120" class="clearfix">

サンプルCSS:

img { float : left ; }

.clearfix { clear : both ; }

プレビュー:

3.floatやclearの使い所

floatとclearの使い方はなんとなくご理解いただけかと思いますので、実際にどういったレイアウトを組むときに利用するのか、サンプルを用意してみました。

以下のようなレイアウトをHTMLとCSSで組んでいきましょう。

プレビュー:

まずはHTMLです。

サンプルHTML:

<html>
<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <section>
    <img src="cat.jpg" width="120" height="120">
    <h1>猫について</h1>
    <p>猫は魚が大好物で、「にゃーん」と鳴きます。</p>
  </section>
  <section>
    <img src="dog.jpg" width="120" height="120">
    <h1>犬について</h1>
    <p>犬はかしこく、「ワンワン」と吠えます。ペットとしても非常に人気があり、小型〜大型まで様々な種類があります。嗅覚や聴覚が鋭いため、警察犬や盲導犬として人間の行動を助けてくれることもあります。喜ぶとしっぽをふるのが可愛らしいですね。</p>
  </section>
  <section>
    <img src="hamster.jpg" width="120" height="120">
    <h1>ハムスターについて</h1>
    <p>ハムスターの大好物はひまわりです。</p>  </section>
</body>
</html>

続いてCSSです。sectionには余白とボーダーを付けて、画像は左側にfloatさせて、テキストを右側に回り込ませました。

特徴的なのがsectionに対してafter要素という疑似要素と呼ばれるものを用意し、それに対してclearfix(回り込みを解除すること)しています。

img{
  float: left;
  margin-right: 16px;
}

section{
  border-bottom: solid 1px #ccc;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

section:after{
  display: block;
  content: "";
  clear: both;
}

clearfixをしないとどうなるか、参考に見てみましょう。

プレビュー:

このようにレイアウトが崩れてしまいます。

 

floatを使う場合は、文字や画像などの要素が増えたときに、レイアウト崩れが発生しないか確かめるようにしましょう。

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

スポンサーリンク

このレッスンの著者