CSS シェイプ

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル1の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

基本的な例

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

リファレンス

プロパティ

データ型

ガイド

外部リソース

仕様書

仕様書 状態 備考
CSS Shapes Module Level 1 勧告候補 初回定義。

ブラウザーの対応

shape-outside

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
shape-outsideChrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
circle()Chrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
<gradient>Chrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
<image>Chrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
inset()Chrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
polygon()Chrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
Support for three-value syntax of position in circle and ellipseChrome 未対応 37 — 68Edge 未対応 なし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 — 55Safari 完全対応 10.1WebView Android 未対応 37 — 68Chrome Android 未対応 37 — 68Firefox 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 — 48Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

shape-margin

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
shape-marginChrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1
接頭辞付き
完全対応 10.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

shape-image-threshold

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
shape-image-thresholdChrome 完全対応 37Edge 未対応 なし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 完全対応 24Safari 完全対応 10.1WebView Android 完全対応 37Chrome Android 完全対応 37Firefox 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 完全対応 24Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 4.0
Support for percentage opacity valuesChrome 完全対応 78Edge 未対応 なしFirefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 78Chrome Android 完全対応 78Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。