CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。
基本的な例
以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。
リファレンス
プロパティ
データ型
ガイド
外部リソース
仕様書
ブラウザーの対応
shape-outside
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
shape-outside | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
circle() | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
<gradient> | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
<image> | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
inset() | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
polygon() | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
| Support for three-value syntax of position in circle and ellipse | Chrome
未対応
37 — 68 | Edge
未対応
なし | Firefox
未対応
62 — 70-
未対応
62 — 70
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
未対応
24 — 55 | Safari
完全対応
10.1 | WebView Android
未対応
37 — 68 | Chrome Android
未対応
37 — 68 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
未対応
24 — 48 | Safari iOS
完全対応
10.3 | Samsung Internet Android
未対応
3.0 — 10.0 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
shape-margin
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
shape-margin | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1-
完全対応
10.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
shape-image-threshold
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
shape-image-threshold | Chrome
完全対応
37 | Edge
完全対応
79 | Firefox
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| IE
未対応
なし | Opera
完全対応
24 | Safari
完全対応
10.1 | WebView Android
完全対応
37 | Chrome Android
完全対応
37 | Firefox Android
完全対応
62-
完全対応
62
-
未対応
61 — 62
- 無効 From version 61 until version 62 (exclusive): 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.
| Opera Android
完全対応
24 | Safari iOS
完全対応
10.3 | Samsung Internet Android
完全対応
3.0 |
|---|
| Support for percentage opacity values | Chrome
完全対応
78 | Edge
完全対応
79 | Firefox
完全対応
70 | IE
未対応
なし | Opera
未対応
なし | Safari
未対応
なし | WebView Android
完全対応
78 | Chrome Android
完全対応
78 | Firefox Android
未対応
なし | Opera Android
未対応
なし | Safari iOS
未対応
なし | Samsung Internet Android
未対応
なし |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。