ミギムキ

[CSS] テキストを画像に回り込ませて表示したい

公開日:2019/08/14 更新日:2020/09/01

画像と文章を横並びに表示するとき、文章の量が多いと左右のバランスが悪くなってしまいます
そんなときは、画像に対して文章が回り込んで表示されるようにすることで収まりがよくなります
今回は、スマホ表示のときは画像とテキストを縦並びにしつつ、横並びにするときは回り込みができるようなスタイルの指定方法を紹介します

サンプルコード

html

<div class="wrap_around">
    <div class="wrap_around_image">
        <img src="./images/sample.jpg" alt="サンプル画像">
    </div>
    <p>猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー猫マナー</p>
</div>

CSS

.wrap_around_image {
    margin: 0px 0px 1em;
}
@media print, (min-width: 768px) {
    .wrap_around::after {
        display: block;
        clear: both;
        content: "";
    }
    .wrap_around_image {
        float: left;
        margin: 0px 1em 1em 0px;
        max-width: 50%;
    }
    .wrap_around_image > img {
        max-width: 100%;
    }
}

画像に対して「float: left;」を指定することで、画像を左寄せで配置しつつ、他の要素が画像に対してぐるりと回り込むようにできます
画像の周りには一文字分の余白をつけて、画像と文章がくっついてしまわないようにします
画像が大きすぎると不格好になってしまうので、表示領域の最大サイズを50%にしてバランスを取っています
文章量が少なくテキストが回り込まなかった場合、floatを指定したままだと続く要素も回り込んでしまいます。この対策のために、「wrap_around」クラスのafter疑似要素内でfloatの解除を行っています

画像を右寄せで置きたい場合

.wrap_around_image {
    margin: 0px 0px 1em;
}
@media print, (min-width: 768px) {
    .wrap_around::after {
        display: block;
        clear: both;
        content: "";
    }
    .wrap_around_image {
        float: right;
        margin: 0px 0px 1em 1em;
        max-width: 50%;
    }
    .wrap_around_image > img {
        max-width: 100%;
    }
}

画像を右側に置く場合は「float: right;」にし、マージンの位置を変えます

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。