このページは Cloud Translation API によって翻訳されました。

CSS シェイプスタートガイド

カスタムパスをラップするコンテンツ

Razvan Caliman

長い間、ウェブデザイナーは長方形の制約の中でデザインを作成してきました。ウェブ上のコンテンツのほとんどは、長方形以外のレイアウトに挑戦してもうまくいかないため、シンプルなボックスに収まっています。しかし、CSS シェイプの導入により、この状況は変わります。CSS シェイプは Chrome 37 以降で利用できます。CSS シェイプを使用すると、ウェブデザイナーは円、楕円、多角形などのカスタムパスにコンテンツをラップできるため、長方形の制約から解放されます。

シェイプは手動で定義することも、画像から推測することもできます。

非常に簡単な例を見てみましょう。

透明な部分のある画像を最初にフローティングしたとき、コンテンツが折り返されてギャップが埋まると期待していたものの、要素の周囲に長方形の折り返し形状が残り、私と同じようにがっかりしたことがあるかもしれません。この問題を解決するには、CSS シェイプを使用します。

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS 宣言は、画像からシェイプを抽出するようブラウザに指示します。

shape-image-threshold プロパティは、シェイプの作成に使用するピクセルの最小不透明度レベルを定義します。値は 0.0（完全に透過）から 1.0（完全に不透明）の範囲にする必要があります。つまり、shape-image-threshold: 0.5 は、形状の作成に使用されるピクセルが不透明度 50% 以上のピクセルのみであることを意味します。

ここで重要なのは float プロパティです。shape-outside プロパティは、コンテンツが折り返される領域の形状を定義しますが、float がないと、その形状の効果は表示されません。

要素の float 値の反対側に浮動小数点領域があります。たとえば、コーヒーカップの画像を含む要素が左にフロートされている場合、フロート領域はカップの右側に作成されます。両側にギャップのある画像を作成することはできますが、コンテンツがラップされるのは、float プロパティで指定された反対側の図形（左または右）のみです。両側にラップされることはありません。

今後、CSS 除外機能の導入により、フローティングではない要素にも shape-outside を使用できるようになります。

シェイプを手動で作成する

画像からシェイプを抽出するだけでなく、手動でコード化することもできます。シェイプを作成するには、circle()、ellipse()、inset()、polygon() の中から関数値を選択します。各シェイプ関数は座標のセットを受け取ります。この座標は、座標系を確立する参照ボックスとペアになります。参照ボックスの詳細については、後ほど説明します。

circle() 関数

円の形状値の完全な表記は circle(r at cx cy) です。ここで、r は円の半径、cx と cy は X 軸と Y 軸上の円の中心の座標です。円の中心の座標は省略可能です。省略すると、要素の中心（対角線の交点）がデフォルトとして使用されます。

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

上記の例では、コンテンツは円形のパスの内側に折り返されます。単一の引数 50% は、円の半径を指定します。この場合は、要素の幅または高さの半分になります。要素のサイズを変更すると、円形の半径に影響します。これは、CSS シェイプをレスポンシブにする方法の基本的な例です。

先に進む前に、ちょっとした注意事項があります。CSS シェイプは、要素の周囲のフロート領域の形状にのみ影響します。要素に背景がある場合、その背景はシェイプによって切り抜かれません。この効果を実現するには、CSS マスクのプロパティ（clip-path または mask-image）を使用する必要があります。clip-path プロパティは、CSS シェイプと同じ表記に従っているため、値を再利用できる点が非常に便利です。

このドキュメントのイラストでは、クリッピングを使用して形状をハイライトし、効果を理解できるようにしています。

円形に戻します。

円の半径にパーセンテージを使用する場合、値は実際には、sqrt(width^2 + height^2) / sqrt(2) という少し複雑な数式で計算されます。これは、要素のサイズが同じでない場合、結果としてどのような円になるかを想像するのに役立ちます。

シェイプ関数座標では、すべての CSS 単位タイプ（px、em、rem、vw、vh など）を使用できます。ニーズに合わせて柔軟性のあるものや堅牢なものを選択できます。

円の位置を調整するには、円の中心座標に明示的な値を設定します。

.element{
  shape-outside: circle(50% at 0 0);
}

これにより、円の中心が座標系の原点に配置されます。座標系とはここで、参照ボックスを導入します。

CSS シェイプの参照ボックス

参照ボックスは、要素の周囲にある仮想ボックスです。図形の描画と配置に使用される座標系を設定します。座標系の原点は左上隅にあり、X 軸は右、Y 軸は下を向いています。

shape-outside は、コンテンツが折り返されるフロート領域の形状を変更します。フロート領域は、margin プロパティで定義されたボックスの外側の端まで拡張されます。これは margin-box と呼ばれ、明示的に指定されていない場合、シェイプのデフォルトの参照ボックスになります。

次の 2 つの CSS 宣言は同じ結果になります。

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

要素にはまだ余白を設定していないため、この時点では、座標系の原点と円の中心が要素のコンテンツ領域の左上にあると想定しても問題ありません。余白を設定すると、次のように変わります。

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

座標系の原点は、円の中心と同様に、要素のコンテンツ領域の外側（上 100 ピクセル、左 100 ピクセル）に移動しました。margin-box 参照ボックスによって確立された座標系のサーフェスの増加を考慮して、円の半径の計算値も増加します。

CSS シェイプスタートガイド

シェイプを手動で作成する

circle() 関数

CSS シェイプの参照ボックス

ellipse() 関数

polygon() 関数

inset() 関数

参照ボックスからシェイプを作成する

図形の余白

図形のアニメーション化

図形内にコンテンツを折り返す

プログレッシブエンハンスメント

CSS 除外による不明確性の解消

CSS シェイプを操作するためのツール

まとめ

CSS シェイプ スタートガイド

シェイプを手動で作成する

circle() 関数

CSS シェイプの参照ボックス

ellipse() 関数

polygon() 関数

inset() 関数

参照ボックスからシェイプを作成する

図形の余白

図形のアニメーション化

図形内にコンテンツを折り返す

プログレッシブ エンハンスメント

CSS 除外による不明確性の解消

CSS シェイプを操作するためのツール

まとめ

CSS シェイプスタートガイド

プログレッシブエンハンスメント