【CSS】円形画像に沿ってテキストを回り込ませる方法

雑誌など紙媒体のレイアウトでよく見かける、円形画像の形に添ってテキストを回り込ませる方法です。

1.実装サンプル

HTML

<div class="content">
 <ul class="shape-outside">
   <li>
     <h2>セロ弾きのゴーシュ#1</h2>
     <figure class="circle"><img src="img01.png" alt=""></figure>
     <p class="text">音楽は別の練習楽長らの虎から見顔ましです。<br>するとたった正確ましだってゴーシュますたい。上手まいたんたはましそしてひまの無理汁のところからはもうまっ黒だろましと、何まで猫につけられんなた。云いすぎぼくはかっこうからひどいないて夕方の一つの外顔が困る第六子人のおじぎにあわててだしました。<br>
むとそっくりゆうべのとおりぐんぐんは今夜なってはじめまし。硝子は万変えラプソディのようを思っが行くなら。譜は先生室や君であわせていたしまし。ゴーシュはセロにすぐに思って向うを甘藍のようが運びてホールから引きずってよろよろ頭が思ってくださいん。きっとそっとかっこうでかっこうが結んますまし。<br>それしばらくと弓をしてゴーシュが云いだた。ゴーシュがむしっですた。</p>
   </li>
   <li>
     <h2>セロ弾きのゴーシュ#2</h2>
     <figure class="circle"><img src="img02.png" alt=""></figure>
     <p class="text">「ばかがこらえまし。眼、何へホール。し。」どこもさっきのときのまもなくこんどのままに膨らんだた。かっこうはゴーシュからご勢になりて音に野ねずみで起きあがってぜひ今行くれたままへわからました。<br>ぱちぱち返事出すて、まげてなっていうてトロメライをまたかっこうをどんと寸出たで。「めいめいまわっ。けちをこさえよまし。習えよ。何はそれにへんをとりでじゃつかまえお母さんも悪いのたてぞ。」ぼくは俄そうにやってべ眼ゴーシュで云いたりた猫の野鼠の云いてとったり云いからしまっで。晩ははいってパンを飛びたまし。</p>
   </li>
   <li>
     <h2>セロ弾きのゴーシュ#3</h2>
     <figure class="circle"><img src="img03.png" alt=""></figure>
     <p class="text">「眼、しばらくおゴーシュをするて、ばかおいでであけよた。<br>
みんなに金星の虎にひいてごらん弾き。なってくれまして。」「いい気るへんの許しな。下ののから。」たばこきれもしてあのぶんの君かく出じてどうあわせましまし。「そしてご返事ははいっないた。たしかに。どこはもうかっこうの額がこわれたてなっれましんです。」「生意気まし。残念ござい。愉快まし。」小屋もこつこつまっ光輝を思えからあるき口の死んだようにねどこ思って取り上げなでてぱちぱち小太鼓にするから聞いました。「それから見よ。」二つは何をくわえたか扉に晩のとまっとひももみんな落ちてはじめ、ところがむしをとるてセロが弾くますまし。すると野ねずみを五五本すぎのへんのひかりを狸のうちにさっきでも立ててしまいましまし。「あれへ明けと。」「すぐか。トロメライにおいてんはそのことか。」頭しはあなたをすぎたかそしてのおっかさんをもぐり込みてずかっこうの楽長の足がいきなり向けましない。そしてやっとかっこうのようなくなんどに「印度のゴーシュ窓」において下に怒っ切れました。それからかっこうもとてもかっこうがかなり行くてしまうますだからいきなりおっかさんたりゴーシュがしましかとしてやっと棒ののへきいつけないた。</p>
   </li>
 </ul>
</div>

CSS
画像にfloatとセットで「shape-outside」プロパティを使用することで実現できます。円形なので値は、circle(50%)を定義します。

.content{
 width: 100%;
 max-width: 1200px;
 margin: 60px auto;
}
.content h2{
 margin-bottom: 30px;
 font-weight: bold;
 font-size: 22px;
 letter-spacing: 0.075em;
}
.shape-outside{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.shape-outside li{
 width: 46%;
 margin-bottom: 60px;
}
.shape-outside li:nth-child(3){
 width: 100%;
}
.circle{
 float: right;
 margin: 0 0 15px 30px;
 shape-outside: circle(50%);
}
.shape-outside li:nth-child(3) .circle{
 float: left;
 margin: 0 30px 15px 0;
 shape-outside: circle(50%);
}
.text{
 font-size: 14px;
 letter-spacing: 0.075em;
 line-height: 1.8em;
}

2.ブラウザサポート状況

IE以外の主要なブラウザでサポートされています。（2021年6月30日現在）

▼shape-outsideのブラウザサポート状況 | Can I use
https://caniuse.com/?search=shape-outside

3.参考サイト

こちらの記事を参考にさせていただきました。
▼shape-outside | MDN Web Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside