CSS シェイプ

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。また、図形を使用して要素の浮動領域の形状を制御するために使用できる CSS プロパティも定義しています。この領域は、除外に適用したり、要素のコンテンツ領域を指定したりすることができます。

仕様書では、シェイプを定義する様々な方法を定義しています。コンテンツの回り込みや内部への入り込みが、要素ボックスの長方形に層のではなく、図形に回り込むようになります。

シェイプは、 CSS の値として使用できる形状を定義します。このモジュールは、楕円、多角形、および任意の形状を作成するための関数を提供しています。他の CSS モジュール、例えば CSS モーションパスや CSS マスクでも、この仕様書で定義されているシェイプを使用することができます。

CSS シェイプの実例

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


  
  
    1782 年 11 月のある夜、フランスの小さな町アノネーで、2人の兄弟が冬の焚き火を囲みながら、囲炉裏から立ち上る灰色の煙が広い煙突に巻き上がるのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。それが記念すべき夜であったことを証明するように、その夜以前には、何億人もの人々が、その事実から特別なインスピレーションを得ることなく、焚き火の煙が立ち昇るのを眺めていた。

body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

参照ボックス

ガイド

シェイプの概要: shape-margin および clip-path プロパティで基本的な図形を定義し、基本的なシェイプを開発者ツールでデバッグします。
ボックス値からのシェイプ: border-radius の曲率と CSS ボックスモデルの値を使用して図形を作成します。
shape-outside による基本シェイプ: CSS シェイプ、参照ボックス、 shape-outside プロパティを使って矩形、円、楕円、多角形を作成します。
画像からのシェイプ: シェイプを半透過の画像ファイルや CSS グラデーションから作成します。

仕様書

Specification
CSS Shapes Module Level 1
CSS Shapes Module Level 2

CSS シェイプ

CSS シェイプの実例

リファレンス

プロパティ

データ型

関数

用語

ガイド

関連概念

仕様書

関連情報