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

基本的な例

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

リファレンス

プロパティ

データ型

ガイド

仕様書

仕様書 策定状況 コメント
CSS Shapes Module Level 1 勧告候補 初回定義。

ブラウザーの対応

shape-outside

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応37 ?531 2 なし248 -webkit-
<gradient> ? ? なし なし なし ?
inset() ? ?543 なし なし ?
polygon() ? ?554 なし ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ?531 2248 -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.

shape-margin

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり ? なし なし なし7 -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり ? ? なし なし ? ?

shape-image-threshold

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応37 ?591 なし247 -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり ? ?59124 ? ?

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.

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: mfuji09,