CSSのshape-outsideはfloatした要素の外形へ文章を回り込ませる

shape-outsideは、floatした要素の外側へ文章を回り込ませるpropertyです。円形の画像へ指定するなら、画像を円く見せる処理、文章が避ける外形、外形と文字の間隔を分けて設定します。

border-radiusで画像を円くしただけでは、文章が避ける範囲は円になりません。反対に、shape-outsideだけを指定しても、画像そのものが円く切り抜かれるわけではありません。

shape-outsideはfloat areaの形を変える

CSS Shapes Module Level 1は、shape-outsideをfloatへ適用し、inline contentがfloatのmargin boxではなく、指定したshapeに沿って回り込む仕組みを定めています。

必要な役割を分けると、次のようになります。

shape-outsideの適用対象はfloatです。floatがなければ、circleを指定しても文章の回り込みには使われません。

circle()で画像の外形へ回り込ませる

円形の画像を左へ置く例は、次のように書けます。

<p class="profile">
  <img class="profile-photo" src="profile.jpg" alt="担当者の顔写真">
  担当者の紹介文をここへ書きます。文章は画像の円形に沿って回り込みます。
</p>

.profile-photo {
  float: left;
  width: 12rem;
  height: 12rem;
  margin: 0 1rem 1rem 0;
  border-radius: 50%;
  shape-outside: circle(6rem at 6rem 6rem);
  shape-margin: 0.5rem;
}

これは説明用の仮例です。border-radius: 50%は画像の表示を円くし、shape-outsideは幅と高さが12remの画像に、半径6rem、中心位置6remの円を作ります。shape-marginは、その円と文章の間へ追加の間隔を設けます。

通常のmarginも残しているため、shape-outsideが反映されない環境でも、四角いfloatと文章の間隔は確保できます。二つの余白を同じものとして増やすと文章が離れすぎるため、実際の文字量で調整してください。

基本図形は内容に合うものを選ぶ

shape-outsideでは、inset()、circle()、ellipse()、polygon()などのbasic shapeを使えます。複雑な図形を作れることより、本文を無理なく読めることを優先します。

図形の点を増やすほど、文章の行頭は細かく変わります。装飾の正確さより、短すぎる行を作らないことを優先してください。

shape-marginと通常のmarginを分ける

shape-marginは、shape-outsideが作る輪郭を外側へ広げます。負の値は使いません。輪郭に沿った間隔を作りたい場合に使います。

一方、通常のmarginはfloat要素のboxに対する余白です。shape-outsideが使われない場合の間隔や、画像の下側に必要な余白もここで決めます。

両方を大きくすると、文章が画像から必要以上に離れます。まず通常のmarginで四角いfloatでも読める間隔を作り、その後でshapeに沿った不足分だけをshape-marginへ加えます。

小さい画面では回り込みを外す判断もする

横幅が狭い画面では、画像の横へ残る文章が数文字になり、円形の回り込みが読みにくくなる場合があります。その場合は、media queryでfloat: noneとshape-outside: noneへ切り替え、画像を本文の上へ置きます。

CSS ShapesはCandidate Recommendationです。使うbrowserと端末で確認し、shapeが使われない場合も文章の順序と意味が変わらないHTMLにしてください。装飾を外しても読めることが、採用条件です。

制作を委託する場合は、画像だけでなく、HTML、CSS、使用したshape、狭い画面で外す条件を受け取ります。画像を差し替えたときも、表示形状と文章の回り込みを別々に調整できます。

最初の一手は、画像を一枚だけ選び、通常のfloatとmarginで読める配置を作ることです。その後でcircle()を加え、文章の行頭が不自然にならないか確認します。