レイアウト
shape-outside
shape-outside は、float で回り込ませた要素の横を流れる文章が、どんな形に沿って回り込むかを指定します。円や多角形、画像の透けていない部分など、四角以外の形に沿わせられます。
構文
none | [ <basic-shape> || <shape-box> ] | <image>
<shape-box> = margin-box | border-box | padding-box | content-boxプレビュー
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: block;
}
.box > :nth-child(2) {
float: left;
width: 8em;
height: 8em;
border-radius: 50%;
shape-outside: circle(closest-side);
}コントロール
shape-outside<basic-shape>
<basic-shape>circle()
circle()closest-side
半径
at <position>center center
四角の中をクリック・ドラッグして中心を動かせます
横の位置
縦の位置
<shape-box>margin-box
12The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。 Pack my box with five dozen liquor jugs. 色は匂へど散りぬるを、我が世誰そ常ならむ。
解説
値の意味
none：初期値です。要素の margin の外側の四角に沿って回り込みます。<basic-shape>：circle()・ellipse()・inset()・polygon()などの図形に沿って回り込みます。図形の大きさや位置の % は、基準の箱に対する割合です。基準の箱は後ろに書いた<shape-box>で、書かなければmargin-boxです。<shape-box>：margin-box・border-box・padding-box・content-boxのどれかの箱を形にします。border-radiusの角丸も形に入るので、角を丸めた要素なら丸みに沿って回り込みます。<image>：画像の透けていない部分を形にします。どこから透けているとみなすかはshape-image-thresholdで決まります。グラデーションも画像として使えます。url()の画像は、ページと同じオリジンにあるか、CORS で読み込みを許されたものだけが使え、そうでなければnoneと同じになります。
気をつけること
- 効くのは
floatで回り込ませた要素だけです。float: noneの要素や、フレックスボックス・グリッドの項目には効きません。 - 変わるのは文章の回り込み方だけで、要素の見た目は四角のままです。見た目も同じ形にしたいときは、
border-radiusやclip-pathで同じ形に描きます。 - 形は、要素の margin の外側の四角で切り取られます。形を四角より外へ広げて、文章を遠ざけることはできません。
- 文章が回り込むのは、これまでどおり片側だけです。
float: leftの要素なら右側だけで、図形の左側が空いていても、そこには文章は入りません。 rect()・xywh()・path()の図形は、shape-outsideで使えるのが新しいブラウザ（Chrome・Edge 149 以降など）だけで、path()は Firefox・Safari ではまだ使えません。このページのコントロールでは扱いません。
このページのプレビューでは、2 番目の項目を補助の宣言で左に回り込ませ（float: left）、角丸で円く描いています。フレックスボックスやグリッドの項目は回り込まないので、箱はふつうのブロック（display: block）にしています。