floatプロパティを使用して画像にテキストを回り込みさせる方法【CSS】

画像にテキストを回り込ませるレイアウトは実務でも年に数回あるかどうかという感じかと思います。画像にテキストを回り込みさせるにはfloatプロパティを使用し、実装にはちょっとしたコツがあります。
今回は、画像にテキストを回り込みさせる方法について詳しく解説していきます。

画像にテキストを回り込ませる実装例

まずは以下の実際の実装例をご覧ください。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

上記例のように、画像にテキストを回り込ませるには以下のコードのようになります。

<div class="box">
    <img src="sample_img.jpg" alt="">
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

.box::after {
    content: "";
    display: block;
    clear: both;
}
img {
    width: 50%;
    height: auto;
    float: left;
    margin: 0 20px 10px 0;
}

上記のように、画像にテキストを回り込ませるにはimgタグにfloatプロパティを指定する必要があります。
それでは、各コードの詳しい解説をしていきます。

floatプロパティについて

floatプロパティを使用すると、要素を左または右に配置(浮動)する事ができます。
今回のように回り込みをさせる場合にしか今は使用されませんが、昔(display: flex;などが使用出来なかった頃)は要素の横並びによく使用されていました。

このfloatプロパティは、floatプロパティを指定した要素と同じ親要素内の後続要素に対して有効となります。使用出来る値は以下となります。

float: left;

要素を左側に配置(浮動)します。

float: right;

要素を右側に配置(浮動)します。

float: none;

要素を浮動させません。

要素をfloatプロパティで配置(浮動)させると高さが失われます。高さが失われると、後続の要素がfloatプロパティを指定した要素に重なってしまいますので、後述するclearfixを設定してあげる必要があります。

画像にテキストを回り込ませる際の注意点とコツ

画像にテキストを回り込ませるにはいくつかコツと注意点がありますので解説していきます。

画像にfloatプロパティ指定する

今回のように画像にテキストを回り込ませるには、画像に対してfloatプロパティを指定する必要があります。

• 画像の右側にテキストを回り込ませる(画像を左に配置)には「left」
• 画像の左側にテキストを回り込ませる(画像を右に配置)には「right」

となります。

回り込むのはfloatプロパティを指定した要素以降の要素で、同じ親要素内

回り込むのはfloatプロパティを指定した要素以降の要素で、同じ親要素内である必要があります。
今回のような例では全てのテキストを回り込ませていますので、.box内に画像とテキストを入れて、画像は最初に配置しています。

余白は画像に設定する

画像とテキストの間の余白は、img要素にmargin(またはpadding)で指定します。

floatを使用した後は必ずclearfixを設定する

先程のfloatプロパティ部分で解説しましたが、floatプロパティを指定した要素は高さが失われてしまいますので必ずclearfixを設定する必要があります。

clearfixは、floatプロパティを指定した際に高さを失ってしまい他の要素が回り込むのを防ぐ為のものとなります。
floatプロパティを指定した要素の親要素(今回の場合は.box)に対して以下のコードを指定します。

.box::after {
    content: "";
    display: block;
    clear: both;
}

途中の文章から回り込みをさせない方法

今回の実装例のように文章が複数がある場合に、途中の文章から回り込みをさせたくない場合は以下のようにします。

<div class="box">
    <img src="sample_img.jpg" alt="">
    <p>ここにテキストが入ります。ここにテキストが入ります。</p>
    <p>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</p>
</div>

img {
    width: 50%;
    height: auto;
    float: left;
    margin: 0 20px 10px 0;
}
p:last-child {
    clear: both;
}

ここにテキストが入ります。ここにテキストが入ります。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

途中で回り込みを解除させたい要素に対してclear: both;を指定するだけでできます。

さいごに

いかがでしたでしょうか。
今回は、floatプロパティを使用して画像にテキストを回り込みさせる方法を解説しました。
いくつかコツや注意点はありますが、慣れれば簡単にできるようになります。たまに実務でも使用しますので、ぜひ覚えておいてください。