shape-outside
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
shape-outside
は CSS のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。shape-outside
によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。
試してみましょう
構文
/* キーワード値 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 関数値 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path(
"M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);
/* <url> 値 */
shape-outside: url(image.png);
/* <gradient> 値 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
/* グローバル値 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: revert;
shape-outside: unset;
shape-outside
プロパティは、浮動領域と浮動要素を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。
値
none
-
浮動領域は影響を受けません。インラインコンテンツは通常通り、要素のマージンボックスを回り込みます。
<shape-box>
-
浮動領域は浮動要素の辺の形状に従って (CSS ボックスモデル で定義された通りに) 計算されます。これは
margin-box
、border-box
、padding-box
、content-box
の何れかになります。この形状はborder-radius
プロパティで生成された丸い角も含みます (background-clip
と同様の動作です)。margin-box
-
マージンの外側の縁で囲まれた形状を定義します。この形状の角の半径は、対応する
border-radius
およびmargin
の値で決定されます。border-radius / margin
の比率が1
以上の場合、マージンの角の半径はborder-radius + margin
です。この比率が1
未満の場合、マージンの角の半径はborder-radius + (margin * (1 + (ratio-1)^3))
となります。 border-box
-
境界の外側の縁で囲まれた形状を定義します。この形状は、境界の外側の形状における通常のルールに従います。
padding-box
-
パディングの外側の縁で囲まれた形状を定義します。この形状は、境界の内側の形状における通常のルールに従います。
content-box
-
コンテンツの外側の縁で囲まれた形状を定義します。このボックスのそれぞれの角の半径は、
0
とborder-radius - border-width - padding
の大きい方になります。
<basic-shape>
-
浮動領域は、
inset()
、circle()
、ellipse()
、polygon()
、またはレベル 2 の仕様書で追加されたpath()
の何れかによって生成された形状に基づいて計算されます。<shape-box>
も提供された場合は、<basic-shape>
関数の参照ボックスを定義します。それ以外の場合、参照ボックスは既定でmargin-box
になります。 <image>
-
浮動領域は指定された
<image>
のアルファチャンネルに基づいて、shape-image-threshold
で定義されたように抽出され計算されます。
メモ: ユーザーエージェントは、shape-outside
の値に含まれるすべての URL に対して、HTML5 の仕様で定義されている CORS に対応している可能性のあるフェッチメソッドを使用する必要があります。読み取りの際、ユーザーエージェントは "Anonymous" モードを使用し、参照元をスタイルシートの URL に設定し、文書の URL を含むオリジンを設定しなければなりません。この結果、有効な代替画像がないなどのネットワークエラーが発生した場合は、none
の値を指定したのと同様になります。
補間
1 つ目と 2 つ目の <basic-shape>
の間でアニメーションを行う場合、次のルールが適用されます。シェイプ関数の中の値は、単純なリストとして補間されます。このリストの値の補間は、可能な限り <length>
、<percentage>
、calc()
のいずれかとして補間されます。リストの値がこれらの型ではなく、同一であった場合 (両方のリストの同じ位置に nonzero
があった場合など)、それらの値は補間されます。
- 両方の形状は、同じ参照ボックスを使用する必要があります。
- 両方の形状が同じ型であった場合、その型が
ellipse()
またはcircle()
であり、かつどの半径にもclosest-side
やfarthest-side
のキーワードを使用していない場合は、シェイプ関数内のそれぞれの値の間で補間されます。 - 両方の形状が
inset()
型であった場合、シェイプ関数内のそれぞれの値の間で補間されます。 - 両方の形状が
polygon()
型であった場合、両方の多角形の頂点の数が同じで、同じ<fill-rule>
を使用していた場合は、シェイプ関数内のそれぞれの値の間で補完されます。 - それ以外の場合は、補間は行われません。
公式定義
初期値 | none |
---|---|
適用対象 | 浮動要素 |
継承 | なし |
計算値 | basic-shape で定義された通り (与えられている場合は shape-box が続く)、 URI を絶対化した image 、それ以外は指定通り。 |
アニメーションの種類 | basic-shape で指定された場合はあり、それ以外の場合はなし |
形式定義
shape-outside =
none |
[ <basic-shape> || <shape-box> ] |
<image>
<shape-box> =
<visual-box> |
margin-box
<image> =
<url> |
<gradient>
<visual-box> =
content-box |
padding-box |
border-box
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
漏斗状のテキスト
HTML
<div class="main">
<div class="left"></div>
<div class="right"></div>
<p>
Sometimes a web page's text content appears to be funneling your attention
towards a spot on the page to drive you to follow a particular link.
Sometimes you don't notice.
</p>
</div>
CSS
.main {
width: 530px;
}
.left,
.right {
width: 40%;
height: 12ex;
background-color: lightgray;
}
.left {
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.right {
-webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
float: right;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
p {
text-align: center;
}
結果
仕様書
Specification |
---|
CSS Shapes Module Level 1 # shape-outside-property |
ブラウザーの互換性
BCD tables only load in the browser