このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
CSS シェイプ
CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。また、図形を使用して要素の浮動領域の形状を制御するために使用できる CSS プロパティも定義しています。この領域は、除外に適用したり、要素のコンテンツ領域を指定したりすることができます。
仕様書では、シェイプを定義する様々な方法を定義しています。コンテンツの内部や外部の折り返しが、要素ボックスの矩形に沿うのではなく、シェイプで行われるようになります。
シェイプは、CSS の値として使用できる形状を定義します。このモジュールは、楕円、多角形、および任意の形状を作成するための関数を提供しています。他の CSS モジュール、例えばCSS モーションパスやCSS マスクでも、この仕様書で定義されているシェイプを使用することができます。
CSS シェイプの実例
以下の例では、左に浮動状態の画像を表示し、shape-outside プロパティをcircle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。 "Play" をクリックすると、このコードを MDN Playground で編集することができます。
<div> <img alt="熱気球" src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" /> <p> 1782 年 11 月のある夜、伝えられるところによれば、フランスの小さな町アノネーで 2 人の兄弟が冬の暖炉のそばに座り、炉から立ち上る灰色の煙の渦が広い煙突をくねくねと登っていくのを見ていた。 2 人の名前はステファンおよびジョセフ・モンゴルフィエ、職業は紙漉き職人で、思慮深く、あらゆる科学的知識や新しい発見に深い関心を持っていた。それが記念すべき夜であったことを証明するように、その夜以前にも、何億人もの人々が、その事実から特別なインスピレーションを得ることなく、焚き火の煙が立ち昇るのを眺めていた。 </p></div>body { font: 1.2em / 1.5 sans-serif;}img { float: left; shape-outside: circle(50%);}リファレンス
プロパティ
CSS シェイプモジュールでは、shape-inside およびshape-padding プロパティも同時に導入されています。現在、これらの機能を対応しているブラウザーはありません。
データ型
関数
用語
ガイド
- シェイプの概要
shape-marginおよびclip-pathプロパティで基本的な図形を定義し、基本的なシェイプを開発者ツールでデバッグします。- ボックス値からのシェイプの作成
border-radiusの曲率と CSS ボックスモデルの値を使用して図形を作成します。shape-outsideによる基本シェイプCSS シェイプ、参照ボックス、
shape-outsideプロパティを使って矩形、円、楕円、多角形を作成します。- 画像からのシェイプの作成
シェイプを半透過の画像ファイルや CSS グラデーションから作成します。
関連概念
CSS モーションパスモジュール
CSS マスクモジュール
CSS 背景と境界モジュール
border-radius一括指定
CSS ボックスモデルモジュール
<box-edge>データ型
仕様書
| Specification |
|---|
| CSS Shapes Module Level 1 |
| CSS Shapes Module Level 2 |
関連情報
- シェイプジェネレーター
- CSS Shapes resources
- CSS Shapes 101 - alistapart.com (2014)
- Creating non-rectangular layouts with CSS Shapes - sarasoueidan.com (2013)
- How to use CSS Shapes in your web design - tutsplus.com (2016)
- Edit CSS shapes with the shape path editor - mozilla.org (2018) (Video)