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 2020年1月.
* Some parts of this feature may have varying levels of support.
shape-outside は CSS のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。shape-outside によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。
試してみましょう
shape-outside: circle(50%);
shape-outside: ellipse(130px 140px at 20% 20%);
shape-outside: url(/shared-assets/images/examples/round-balloon.png);
shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
<section class="default-example" id="default-example">
<div class="example-container">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/round-balloon.png"
width="150" />
We had agreed, my companion and I, that I should call for him at his house,
after dinner, not later than eleven o’clock. This athletic young Frenchman
belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
as a pastime. After having exhausted all the sensations that are to be found
in ordinary sports, even those of “automobiling” at a breakneck speed, the
members of the “Aéro Club” now seek in the air, where they indulge in all
kinds of daring feats, the nerve-racking excitement that they have ceased to
find on earth.
</div>
</section>
.example-container {
text-align: left;
padding: 20px;
}
#example-element {
float: left;
width: 150px;
margin: 20px;
}
構文
/* キーワード値 */
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 |
half-border-box
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<visual-box> =
content-box |
padding-box |
border-box
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
漏斗状のテキスト
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 |
ブラウザーの互換性
Loading…