サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

CSS:画像の形に合わせてテキストを回り込ませる方法【shape-outside】

CSS:画像の形に合わせてテキストを回り込ませる方法【shape-outside】

この記事にはプロモーションが含まれています。

スマホページでは画像とテキストを縦に並べることが多いですが、パソコンや大きめのタブレットでも同じレイアウトにしていると、縦に長くなってページが見づらくなる場合もあります。

そこでPC表示では画像とテキストを横並びにする対策が取られるのですが、単に横並びにするだけでは、退屈なデザインになりがちです。

例えば下のようなレイアウトをイメージしてみて下さい。見やすいですが、なんだか機械的に並べただけのようで面白みに欠けると言えます。

画像とテキストをただ横並びにしただけのイメージ

それでは次に、下の画像のように画像の形に合わせてテキストが回り込むようなレイアウトだとどうでしょうか?
少し動きや遊び心が生まれたような、そんなイメージになったのではないかと思います。

画像の形に合わせてテキストを回り込ませたイメージ

このような画像の形に合わせたテキストの回り込みは、IllustratorやPhotoshopを使わずともCSSで実装可能です。
画像として書き出すのではなくCSSで調整することにより、テキスト部分をテキスト要素として配置することが可能となります。
テキストを画像化すると画質によってはテキストが読みづらくなってしまうため、テキストの可読性を保つ上でもCSSで行うメリットは大きいと言えます。

そこで今回は、CSSを使って画像の形に合わせてテキストを回り込ませる方法をご紹介していきます。

– 目次 –

STEP1:floatで横並びにする

flexやgridが標準となって浸透した現在(2022年2月)、要素の横並びはフレックスボックスやグリッドレイアウトを使うのがセオリーです。

しかし、画像の形に合わせてテキストを回り込ませるには、floatプロパティを使って横並び(回り込み状態)にする必要があります。

本記事はfloatプロパティの解説記事ではないので、floatの使い方や仕様に関しては詳しくは説明しません。
ものすごく簡単に説明しておくと、floatプロパティとはその名(フロート=浮く)の通り、要素をふわっと浮かせて、他の要素の左/右に回り込ませることができるCSSです。

浮かせたい要素をセレクタとして指定し、配置したい方向(rgiht/leftなど)を値として指定します。

実際の簡単な使い方を確認してみましょう。
下のサンプルコードをご覧ください。ブロックレベル要素であるdivタグが2つ並ぶので、ブラウザで表示すると画像とテキストが縦並びになります。


    <div class="shape-outside01">
      <div class="inu_img_outer">
        <img class="inu_img" src="img/inu.png" alt="">
      </div>
      <div class="samole_text">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

表示結果

犬の画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

ここで、class名inu_img_outerのdiv要素に対して、float: left;というCSS調整を追加すると、img要素(画像)を含んだdiv要素が浮いたような状態となって、位置が左側に固定されます。

この時、テキスト要素を含むdiv要素(class名=sample_text)は、floatで浮いて左に固定された画像要素(を含むdiv要素)の右側に回り込む…という状態になります。
結果的に、下のように画像とテキストが横並びになります。


      .inu_img_outer {
        float: left;
      }

表示結果

犬の画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

フレックスボックスやグリッドレイアウトが一般的になる前は、このfloatプロパティで要素を横並びにしていました。
しかし、フレックスボックス等の方が使い勝手が良い上に細かい調整も効くので、現在は横並びにする目的でfloatを使うことはほぼありません。

ただ、画像の形に合わせたテキストの回り込みに関してはfloatプロパティを使う必要があるので、まずはこの方法で要素を横並びにしていきます。

    POINT!
  1. ・floatプロパティは要素を浮かせて、他の要素を左右に回り込ませるCSS!
  2. ・フレックスボックス等が標準となった今となっては、要素を横並びにする目的で使われることはほぼない!
  3. ・ただし、画像の形に合わせてテキストを回り込ませたい場合は、floatを使った横並びにする必要がある!

STEP2:shape-outsideを指定する

画像と要素をfloatで横並びにできたら、いよいよ画像の形に合わせたテキストの回り込みを指定していきます。
画像の形といっても画像によって色々な形がありますが、この章では丸(正円)の画像を使った場合で説明していきます。
SNSのアイコンやプロフィール写真など、正円の画像を使う機会は割と多いですからね。

実は正円の画像に合わせてテキストを回り込ませる指定は極めて簡単で、画像もしくは画像を含む要素にshape-outside: circle();と指定するだけです。

通常、背景が透明の切り抜き画像でも画像データ上は【 300px × 300px 】というようになっており、切り抜きがどんな形であれ四角形として認識され、四角形に合わせて画像やテキストが配置されます。
そこでfloatで浮かせた要素にshape-outsideプロパティを適用させて形を定義することにより、四角形ではない形として認識されるようになるという仕組みです。

また、circle()のカッコの中には円の半径を指定できますが、無記入(空白)でも自動的に半径が画像の大きさの50%(直径100%)となるため、こだわりがなければ基本的に空白でOKです。

それでは、画像要素を含むdiv要素(class名=inu_img_outerの)に対して、shape-outside: circle();と指定したコードと表示結果を確認してみましょう。


   HTML
    <div class="shape-outside01">
      <div class="inu_img_outer">
        <img class="inu_img" src="img/inu.png" alt="">
      </div>
      <div class="samole_text">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

   CSS
      .inu_img_outer {
        float: left;
        shape-outside: circle();
        margin: 15px;
      }

表示結果

犬の画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

画像の形(正円)に合わせてテキストが回り込みました。
画像とテキストの距離が近すぎると感じる時は、marginで余白を設定すると良いです。

ちなみにですが、スマホ表示用にfloatを解除して縦並びに戻したい場合は、float指定した要素…ではなく、回り込んでいるテキストを含む要素に対してclear: both;と指定すればOKです。

ボタンで表示切り替え

犬の画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

 用語解説:clear(クリア)プロパティとは?

    POINT!
  1. ・画像の形に合わせてテキストを回り込ませる場合、画像を含む要素に対してshape-outsideプロパティを指定する!
  2. ・画像の形が丸(正円)の場合、shape-outsideの値はcircle();でOK!
  3. ・スマホ表示用にテキストの回り込みを解除したい場合は、回り込んでいるテキストを含む要素に対し、clear: both;を指定すればOK!

楕円の場合

画像がまん丸の場合は前章で紹介した、shape-outside: circle();で良いのですが、画像が横長や縦長の楕円形の場合は違う値を適用させる必要があります。
その値が、ellipse()です。

circle();は、あくまで正円の形を作り出す値なので縦長の楕円に適用すると、下のようにズレてしまいます。

表示結果

ポテトの画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

一見、あまり問題なさそうに見えますが、よく見るとタイトルが左端に寄ってしまっているのと、marginを指定しているのにも関わらずテキストが画像に近づき過ぎてしまっている部分がありますね。

では次に、shape-outside: ellipse();と指定し直してみましょう。
shape-outsideの値がcircle();からellipse();に変わるだけではありますが、コードも掲載しておきます。


    HTML
    <div class="shape-outside02">
      <div class="potato_img_outer">
        <img class="potato_img" src="img/fried potato.png" alt="フライドポテトの画像">
      </div>
      <div class="sample_text2">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

    CSS
      .potato_img_outer {
        float: left;
        shape-outside: ellipse();
        margin: 15px;
      }


表示結果

ポテトの画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

shape-oputsideプロパティの値をellipse();にすることで、まん丸ではなく細長の楕円の形に合わせてテキストが回り込むようになりました。

ちなみに、ellipse()のカッコの中はcircle()同様、通常は空白で大丈夫です。
楕円の画像に指定すれば、ブラウザが自動的に画像の形に合わせて適切な楕円形にしてくれます。

任意の数値で半径を指定することもできますが、楕円なので横(X軸)の半径と縦(Y軸)の半径の2種類を指定する必要があります。
さらに、楕円の中心位置を指定することもできます。
たとえば、ellipse(40% 50% at left top);と指定したならば、X軸は40%の半径、Y軸は50%の半径の楕円で、左上が楕円の基準位置…ということになります。

楕円の数値設定は慣れれば難しくはないのですが、対象がよほど複雑な楕円でない限りあまり気にする必要もないかなと思います。

    POINT!
  1. ・画像が縦長や横長の楕円の場合は、値をellipse();にする必要がある!
  2. ・ellipse()は楕円を指定する値であり、通常であればカッコの中は空白でもOK!
  3. ・複雑な楕円の指定をしたい場合は、楕円の横・縦の半径の長さと楕円の中心位置を指定しよう!

より複雑な形の場合

円や楕円など、比較的単純な形の画像であればこれまでに紹介した方法でいけることがほとんどだと思いますが、複雑な形を指定してテキストを回り込ませたい場合は別の値を指定する必要があります。
その値が、polygon()です。

circle()やellipse()は、カッコの中が空白でも画像の形に合わせた正円・楕円になるので良いのですが、polygon()はそういうワケにはいかず、カッコの中の数値指定が必須です。

polygon()のカッコの中に、X軸(横方向)とY軸(縦方向)の位置を%で指定していきます。
複数の指定ポイントを,(カンマ)で区切り、最終的には指定ポイントが線で結ばれることによってshape-outsideの形(シェイプ)が形成されます。

画像を四角形(300 × 300pxなど)で捉えたとき、左上が(0% 0%)、右上が(100% 0%)、右下が(100% 100%)、左下が(0% 100%)となります。
よって、たとえば画像の下端を底辺とし、画像の上端の中央を頂点とする三角形の形を定義したい場合は以下の指定値になります。

shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);

polygon()の指定イメージ

polygonの指定の基礎を押さえたところで、例として階段状の形にテキストを回り込ませてみましょう。
floatプロパティを使ったり、shape-outsideプロパティを指定するのは同じなので、polygon()のカッコの中の数値指定が ポイントとなります。


    HTML
    <div class="shape-outside03">
      <div class="kaidan_img_outer">
        <img class="kaidan_img" src="img/kaidan-8.png" alt="階段状の画像">
      </div>
      <div class="sample_text2">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

    CSS
      .kaidan_img_outer {
        float: left;
        shape-outside: polygon(0% 0%, 20% 0%, 40% 20%, 60% 40%, 80% 60%, 100% 80%, 100% 100%, 0% 100%);  
        margin: 15px;
      }

表示結果

階段状の画像

タイトル

サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキスト

shape-outsideプロパティで形成される形が階段状になるようにpolygon()の値を指定することで、正円でも楕円でもない複雑な形に対してもその形通りにテキストを回りこませることができました。

ただ、ここまで複雑な形になると回り込ませたテキストが読みづらくなってしまうことも考えられます。
そのため、確実に読ませたい重要なお知らせなどに対して指定する際は注意が必要と言えます。

    POINT!
  1. ・複雑な形にテキストを回り込ませる場合は、polygon()を活用しよう!
  2. ・polygon()は、X軸とY軸のポイントを%で複数指定し、それらのポイントが最終的に線で繋がることで形が出来上がる!
  3. ・複雑な形にテキストを回り込ませる場合は、テキストが読みづらくならないように気を付けよう!
– 関連記事 –

今回の動画で紹介したコード!

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style media="screen">
      .inu_img_outer {
        float: left;
        shape-outside: circle();
        margin: 15px;
      }
      .inu_img, .potato_img, .kaidan_img {
        width: 200px;
      }
      .samole_text {}

      .potato_img_outer {
        float: left;
        shape-outside: ellipse();
        margin: 15px;
      }
      .kaidan_img_outer {
        float: left;
        shape-outside: polygon(0% 0%, 20% 0%, 40% 20%, 60% 40%, 80% 60%, 100% 80%, 100% 100%, 0% 100%);
        margin: 15px;
      }

    </style>
  </head>
  <body>

    <div class="shape-outside01">
      <div class="inu_img_outer">
        <img class="inu_img" src="img/inu.png" alt="">
      </div>
      <div class="sample_text">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

    <div class="shape-outside02">
      <div class="potato_img_outer">
        <img class="potato_img" src="img/fried potato.png" alt="フライドポテトの画像">
      </div>
      <div class="sample_text2">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

    <div class="shape-outside03">
      <div class="kaidan_img_outer">
        <img class="kaidan_img" src="img/kaidan-8.png" alt="階段状の画像">
      </div>
      <div class="sample_text2">
        <h2>タイトル</h2>
        <p>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
          <br>サンプルテキストサンプルテキストサンプルテキスト
        </p>
      </div>
    </div>

  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン