CSS3

：

プロパティ

：

shape-outside

　編集：2022.07.07 by T.A.

浮動体を避ける区画を定義。

名前	`shape-outside`
値	none \| [<basic-shape> \|\| <shape-box>] \| <image>
初期値	none
適用対象	浮動体
継承	されない
百分率	受容しない
算出値	指定されたキーワード／［基本図形の算出値に従う <basic-shape> と 0 ～ 1 個の<shape-box> 値］／算出 <image>
正準的順序	文法に従う
アニメーション型	<basic-shape> に対しては基本図形の補間に従う。他の値に対しては離散的。

none

浮動区画は影響されない。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg, #808, #fff);
  shape-outside:none;
  float:left;
  padding:10px;
 ">１</DIV>あああああああああああああああああああああああああああああああああああああああああ
</DIV>

<basic-shape> || <shape-box>

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg, #808, #fff);
  shape-outside:inset(20px round 30px) padding-box;
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</DIV>

<image> ○

図形は、指定された <image> のアルファチャンネルから shape-image-threshold にて定義されるように抽出され、それに基づいて算出される。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg, #808, #fff);
  shape-outside:linear-gradient(45deg, #808f, #fff0);
  shape-image-threshold:0.3;
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

shape-image-thresholdの指定が必要

<shape-box>

＝margin-box | border-box | padding-box | content-box

図形は、margin-box、border-box、padding-box、content-box いずれかに基づいて、border-radius による曲げも含め、対応するボックスを利用して算出される ─ background-clip [CSS3BG] と同様に。

<basic-shape>

＝inset() | circle() | ellipse() | polygon()

図形は、inset()、circle()、ellipse()、polygon() のいずれかに基づいて算出される。<shape-box> も給された場合、それが <basic-shape> 関数の基準ボックスを定義する。給されなかった場合の既定の基準ボックスは、margin-box になる。

図形用の座標系の原点は、基準ボックスの左上隅になる ─ ここで、x‐軸は右向き、y‐軸は下向きである。百分率で表出されるすべての長さは、基準ボックスの使用サイズから解決される。

margin-box

この値は、マージン辺に封入される図形を定義する。この図形の各隅の各半径は ─ ［隅と同じ側、半径と同じ方向］における［border-radius 値を半径／margin-＊値をマージン］と記すとき ─ 次で決定される：

⮡ ［半径 ≧ マージン］の場合（特に、マージン ≦ 0 の場合）：: max( 半径＋マージン, 0 )
⮡ 他の場合：: 半径＋(マージン×(1－((1－(半径÷マージン))の3乗)))

【2 つの式は［半径＝マージン］の所で一致するので、結果もそこを境に連続的に遷移する。】

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:1px solid #f00;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:margin-box;
  float:left;
  margin:10px;
 "></DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

border-box

ボーダー辺に封入される図形を定義する。この図形は、通常の［ボーダーの外側に対する、ボーダー半径形状付け規則］すべてに従う。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:border-box;
  float:left;
  margin:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

padding-box

パディング辺に封入される図形を定義する。この図形は、通常の［ボーダーの内側に対する、ボーダー半径形状付け規則］すべてに従う。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:padding-box;
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

content-box

内容辺に封入される図形を定義する。このボックスの各隅の半径は、次の結果を 0 以上に切り上げた結果になる：

border-radius － border-width － padding

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:content-box;
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

inset()

＝inset(<length-percentage>{1,4} [round <'border-radius'>]?)

内方へオフセットされた矩形を定義する。

1 ～ 4 個の <length-percentage> 引数は、［基準ボックスの各側からの inset（内方へのオフセット）］を時計回りに設定する。
<'border-radius'> 引数（省略可）は、border-radius 略式プロパティ構文を利用して、オフセットされた矩形の各隅の丸めを定義する。

いずれかの次元において、両側の inset の合計が基準ボックスの使用サイズを超える場合（左、右とも 75% など）、[CSS3BG] による § 曲線が重なり合う場合と同じ規則を利用して、両側の比を保ちながら合計が 100% になるまで抑制する。これによる結果、図形の辺は、基準ボックスの中（inset が両側とも 75% の事例では、50% の所）に位置することになる。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:inset(15px 30px);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

circle()

＝circle(<shape-radius>? [at <position>]?) mdn

真円を定義する。

<shape-radius> 引数は、真円の半径を表現する。負な値は無効。百分率値は、基準ボックスの使用［横幅、縦幅］から、式［√(横幅の 2 乗＋縦幅の 2 乗) ÷ √ 2］を基準に解決される。
<position> 引数は、真円の中心を定義する。省略時の既定は center（基準ボックスの中心）になる。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:circle(40px);
  float:left;
  padding:10px;
 ">１</DIV>あああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</DIV>

ellipse()

＝ellipse([<shape-radius>{2}]? [at <position>]?)

楕円を定義する。

2 個の <shape-radius> 引数は、順に、楕円の［x‐軸、y‐軸］半径を表現する。いずれも、負な値は無効。各引数に対する百分率値は、順に、基準ボックスの使用［横幅、縦幅］に対し解決される。
<position> 引数は、楕円の中心を定義する。省略時の既定は center（基準ボックスの中心）になる。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:ellipse(40px 20px);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</DIV>

polygon()

＝polygon(<'fill-rule'>?, [<length-percentage> <length-percentage>]#)

多角形を定義する。

<'fill-rule'> 引数は、多角形の内域を決定する規則に利用される ─ 詳細は、SVG の fill-rule プロパティを見よ。可能な値は nonzero、evenodd であり、省略された場合、nonzero が既定の値になる。
リスト内の各［<length-percentage> 引数ペア］は、多角形の各頂点を順々に与える［x、y］座標を表現する。¶ペア区切りはコンマ。

ユーザーエージェントは、このリストの最後の頂点から最初の頂点へ接続して多角形を閉じるものとする。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:polygon(0% 0%, 50% 20%, 70% 70%, 0% 100%);
  float:left;
  padding:10px;
 ">１</DIV>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</DIV>

path()

＝path([<'fill-rule'>,]? <string>)

パスによる図形を定義する。

<'fill-rule'> 引数は、パスの内域を決定するために利用される ─ 詳細は、SVG の fill-rule プロパティを見よ。可能な値は nonzero、evenodd であり、省略された場合、nonzero が既定の値になる。
<string> は、SVG パスデータ文字列を表現する。パスデータ文字列は、SVG 1.1 の文法と構文解析規則【参照】に適合しなければならない。初期位置はパス文字列内の最初の移動する命令（"m"／"M"）にて定義され、初期方向は SVG 1.1 に従う【“初期方向”は何のための記述？】。

ユーザーエージェントは、閉じたループを要求するプロパティ（shape-outside や clip-path など）において、文字列内にパスを閉じる命令（"z"／"Z"）が無い場合には、暗黙的なそれでパスを閉じるものとする。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:path('Com/Picture_Clip.gif','Z');
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああああああああああ
</DIV>

¶SVGでないとできないようだ

<shape-radius>: ＝<length-percentage> | closest-side | farthest-side
真円／楕円用の半径を定義する。省略時の既定の値は、closest-side 。

closest-side

図形の中心から基準ボックスの最も近い側までの長さを利用する。

真円用には、両次元にて最も近い側になる。

楕円用には、各半径に対し、当の次元にて最も近い側になる。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:circle(closest-side);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:ellipse(closest-side closest-side);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

farthest-side

図形の中心から基準ボックスの最も遠い側までの長さを利用する。

真円用には、両次元にて最も遠い側になる。

楕円用には、各半径に対し、当の次元にて最も遠い側になる。

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:circle(farthest-side);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

<DIV style="width:200px; height:200px; border:1px solid black;
 font-size:15px;
">
 <DIV style="width:100px; height:100px; border:10px solid #f004;
  background:linear-gradient(45deg,#808,#fff);
  shape-outside:ellipse(farthest-side farthest-side);
  float:left;
  padding:10px;
 ">１</DIV>ああああああああああああああああああああああああああああああああああああ
</DIV>

<position> ●

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：