[CSS] shape-outside プロパティで画像にテキストを回り込ませる方法

雑誌や新聞などの印刷物では、画像の周囲にテキストを回り込ませるレイアウトをよく目にします。
Webでも CSS の shape-outside プロパティ を使えば、画像の形状に合わせてテキストを自然に回り込ませることができます。

shape-outside の基本的な使い方

shape-outside は、回り込みさせたい要素（通常は img）に指定 します。
あわせて float を指定する点がポイントです。

画像の形状を指定する方法（shape-outside）

画像の形状	指定方法
正円	shape-outside: circle();
楕円	shape-outside: ellipse();
多角形	shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 座標で指定します
画像の輪郭にあわせる	shape-outside: url(image.png);

画像とテキストの余白を指定する（shape-margin）

shape-margin を指定すると、テキストと画像の間に余白を作れます。

px、em、% などの単位を使えます。

サンプル：正円形の画像にテキストを回り込ませる

See the Pen
[shape-outside] 画像にテキストを回り込ませる by mkl may (@mkl-may)
on CodePen.

サンプル：画像とテキストをdivで囲む

試しに、画像やテキストを <div> で囲っても問題なく機能しました。

See the Pen
[shape-outside: ellipse();] 楕円形の画像にテキストを回り込ませる by mkl may (@mkl-may)
on CodePen.

まとめ

CSS の shape-outside プロパティ を使えば、画像の形状に合わせて自然な回り込みレイアウトを実現できます。
印刷物でよく見かけるデザインをWebでも再現できるので、記事やプロフィール紹介などに活用してみてください。