CSSでテキストを円形に回り込ませる方法｜shape-outsideプロパティの使い方

CSSを使えば、段落テキストを円形の画像や要素の周りに自然に回り込ませることができます。本記事では、その具体的な実装方法をコード例とともにわかりやすく解説します。

コンテンツの見せ方にもう少し変化をつけたい、雑誌のようなおしゃれなレイアウトを実現したい——そんなときにおすすめなのが、CSSによるテキストの回り込み制御です。特に円形の画像と組み合わせれば、記事全体がぐっと洗練された印象になります。

実装手順

1. HTMLを準備する

まずは、ベースとなるHTMLを用意しましょう。

<article class="post">
  <img
    class="circle"
    src="https://www.fwz-elektrotechnik.de/wp-content/uploads/2014/11/Globus-Wikipedia-Kopie-1.png"
    alt="地球儀の画像"
  />

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    explicabo praesentium aliquid quam ut sint voluptas omnis, quis, est vitae?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia fuga
    possimus dolorum ea, fugiat facere sapiente natus excepturi numquam
    praesentium aliquid quam ut sint explicabo praesentium aliquid quam ut sint
    voluptas omnis, quis, est vitae?
  </p>
</article>

ここで注目したいのは、<article> 要素には post クラスが、<img> 要素には circle クラスがそれぞれ指定されている点です。

2. CSSを追加する

続いて、以下のCSSを追加します。

.post {
  max-width: 800px;
  margin: 3rem auto;
}

.circle {
  float: right;
  height: 30vw;
  margin-left: 1rem;
  margin-left: calc(1rem + 2vw);
  object-fit: cover;
  shape-outside: circle(50%);
  width: 30vw;
}

表示結果

これで、テキストが円形の画像に沿って美しく回り込むようになります。実際の表示結果は以下の通りです。

なかなか良い感じに仕上がりましたね。

ポイントは shape-outside プロパティ

この表現を実現しているのが、shape-outside というCSSプロパティです。circle(50%) を指定することで、フロートした要素の周りにテキストが円形に沿って流し込まれます。

shape-outside は、Chrome・Edge・Firefox・Safariといった最新の主要ブラウザでサポートされています。ただし、Internet Explorerでは動作しないため、IE対応が必要な場合は、通常の四角形での回り込みにフォールバックされる点に留意しておきましょう。

また、shape-outside は必ず float と組み合わせて使う必要がある点にも注意してください。フロートしていない要素に対しては効果が現れません。