CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。
基本的な例
以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。
リファレンス
プロパティ
データ型
ガイド
外部リソース
仕様書
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
shape-outside
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
<image> | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
<gradient> | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
inset() | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
circle() | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
polygon() | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
1. From version 61: 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 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
<image> |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
<gradient> |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
inset() |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
circle() |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
polygon() |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
shape-margin
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 | 37 |
? | 611 |
なし | 24 | 10.1
-webkit-
|
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
1. From version 61: 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 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1-
完全対応
10.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
shape-image-threshold
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本対応 | 37 |
? | 611 |
なし | 24 | 10.1 |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|
| 基本対応 | 37 | 37 |
? | 611 | 24 | 10.3 | 4.0 |
1. From version 61: 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 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.1 |
完全対応
37 |
完全対応
37 |
?
|
完全対応
61-
完全対応
61
- 無効 From version 61: 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 |
完全対応
10.3 |
完全対応
4.0 |
|---|
凡例
-
完全対応
- 完全対応
-
未対応
- 未対応
-
実装状況不明
- 実装状況不明
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。