CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプはフロート状態のものに適用されます。仕様書ではフロート状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。
基本的な例
以下の例では、左にフロート状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、フロート状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。
リファレンス
プロパティ
データ型
ガイド
仕様書
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
shape-outside
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 | 37 |
? | 531 2 |
なし | 24 | 8
-webkit-
|
<gradient> |
? |
? |
なし |
なし |
なし |
? |
inset() |
? |
? | 543 |
なし |
なし |
? |
polygon() |
? |
? | 554 |
なし |
? |
? |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 |
? |
? |
? | 531 2 | 24 | 8
-webkit-
|
? |
<gradient> |
なし |
? |
? |
なし |
? |
? |
? |
inset() |
なし |
? |
? | 543 |
なし |
? |
? |
polygon() |
なし |
? |
? | 554 |
? |
? |
? |
1. Firefox only supports values <shape-box>, circle(), and ellipse().
2. From version 53: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
3. From version 54: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
4. From version 55: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet |
|---|
| 基本対応 |
完全対応
37 |
?
|
部分対応
53-
部分対応
53
- 補足 Firefox only supports values
<shape-box>, circle(), and ellipse(). - 無効 From version 53: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
未対応
なし |
完全対応
24 |
完全対応
8-
完全対応
8
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
?
|
?
|
?
|
部分対応
53-
部分対応
53
- 補足 Firefox only supports values
<shape-box>, circle(), and ellipse(). - 無効 From version 53: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
完全対応
24 |
完全対応
8-
完全対応
8
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
?
|
|---|
<gradient> |
?
|
?
|
未対応
なし |
未対応
なし |
未対応
なし |
?
|
未対応
なし |
?
|
?
|
未対応
なし |
?
|
?
|
?
|
|---|
inset() |
?
|
?
|
完全対応
54-
完全対応
54
- 無効 From version 54: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
未対応
なし |
未対応
なし |
?
|
未対応
なし |
?
|
?
|
完全対応
54-
完全対応
54
- 無効 From version 54: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
未対応
なし |
?
|
?
|
|---|
polygon() |
?
|
?
|
完全対応
55-
完全対応
55
- 無効 From version 55: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
未対応
なし |
?
|
?
|
未対応
なし |
?
|
?
|
完全対応
55-
完全対応
55
- 無効 From version 55: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
?
|
?
|
?
|
|---|
凡例
-
完全対応
- 完全対応
-
部分対応
- 部分対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
shape-margin
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 |
あり |
? |
なし |
なし |
なし | 7
-webkit-
|
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 |
あり |
? |
? |
なし |
なし |
? |
? |
| デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet |
|---|
| 基本対応 |
完全対応
あり |
?
|
未対応
なし |
未対応
なし |
未対応
なし |
完全対応
7-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
完全対応
あり |
?
|
?
|
未対応
なし |
未対応
なし |
?
|
?
|
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
shape-image-threshold
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 | 37 |
? | 591 |
なし | 24 | 7
-webkit-
|
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 |
あり |
? |
? | 591 | 24 |
? |
? |
1. From version 59: this feature is behind the layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet |
|---|
| 基本対応 |
完全対応
37 |
?
|
完全対応
59-
完全対応
59
- 無効 From version 59: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
未対応
なし |
完全対応
24 |
完全対応
7-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
完全対応
あり |
?
|
?
|
完全対応
59-
完全対応
59
- 無効 From version 59: this feature is behind the
layout.css.shape-outside.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
|
完全対応
24 |
?
|
?
|
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。