CSS シェイプの概要

CSS シェイプレベル1仕様書は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル1は、フロート状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。

例えば、アイテムを左にフロートした状態にすると、テキストがアイテムの右と下に矩形に回り込みます。円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。

これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。

仕様書は何を定義しているのか

仕様書では、3つの新しいプロパティを定義しています。

shape-outside プロパティで、シェイプを定義することができます。これは様々な値を取り、 <basic-shape> データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。

次の例では、左にフロート状態にした画像があります。それから shape-outside プロパティを circle(50%) の値で適用しています。その結果は、内容の周囲が画像のボックスによって形成された矩形ではなく、丸い形状で切り取られたカーブとして表示されるようになります。

仕様書のこのレベルでは、要素は <basic-shape> を適用するためにフロート状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁をコンテンツが回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。

基本的なシェイプ

circle(50%) の値は基本的なシェイプの例の一つです。仕様書では次のように、4つの <basic-shape> 値を定義しています。

  • inset()
  • circle()
  • ellipse()
  • polygon()

inset() の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲のコンテンツの行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。

すでに circle() が円形のシェイプを作成するのを見てきました。 ellipse() は基本的なつぶれた円であり、これらの単純なシェイプで対応できない場合は、 polygon() を作成して好きなだけ複雑なシェイプにすることができます。

この章のこの先のガイドで、それぞれの利用できる基本的なシェイプをその作成方法を紹介します。

ボックス値からのシェイプの作成

シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。

  • border-box
  • padding-box
  • content-box
  • margin-box

次の例では、 border-box の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。

ボックス値についてより詳しく知るには、ボックス値からのシェイプの作成を参照してください。

画像からのシェイプの作成

パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りのコンテンツの回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。

なお、この方法で使用される画像は CORS に互換性がある必要があり、そうでなければ shape-outside は値として none が指定されたかのように動作し、シェイプを得ることはできません。

次の例では、完全に透過した領域がある画像を用い、この画像を shape-outside の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。

shape-image-threshold

shape-image-threshold プロパティは、シェイプに使われる画像の領域を定義する画像の透過性の閾値を設定するために使用します。 shape-image-threshold0.0 (初期値) である場合、領域は完全に透過になります。値が 1.0 である場合は完全に不等価になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。

シェイプを定義する画像としてグラデーションを使用すると、閾値が良く見えます。次の例では、閾値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。

画像からのシェイプの作成については、このガイドの後の章でより深く見てみます。

shape-margin プロパティ

shape-margin プロパティは shape-outside にマージンを追加します。これにより、シェイプを囲むコンテンツの行ボックスがシェイプから引き離されるため、短くなります。

次の例では、基本的なシェイプに shape-margin を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。

作成されたコンテンツのフロート状態のアイテムとしての使用

今までの例では、ページ上でアイテムの形が見えるように画像や見える要素を使ってきましたが、単に矩形ではない線に沿ってテキストを流したいだけの場合もあるでしょう。これをシェイプを使って行うことができますが、この場合もフロート状態のアイテムが必要になります。アイテムは非表示でも構いませんが、何かをフロート状態にする必要があります。これは文書に空の <div> 又は <span> のような冗長な要素を挿入することで実現できますが、おすすめは生成コンテンツを使うことです。つまり、 CSS のスタイルを使用して実現することができます。

次の例では、高さと幅が150pxの要素を挿入するために生成コンテンツを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。

clip-path との関係

シェイプを作成するために使われる基本シェイプとボックス値は、 clip-path の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。

以下の画像は青い背景の四角い画像です。 shape-outside: ellipse(40% 50%); 及び clip-path: ellipse(40% 50%); を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。

シェイプのための開発者ツール

ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内でシェイプパスエディターを公開しています。このツールはページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。

シェイプパスエディターは、 Firefox 60 で clip-path から生成されるシェイプと共に既定で有効になる予定です。 shape-outside で生成されるシェイプを使用することもできますが、 layout.css.shape-outside.enabled の設定を有効にした場合のみです。

将来の CSS シェイプ機能

当初のシェイプ仕様書には、要素内にシェイプを作成するための shape-inside プロパティが含まれていました。このプロパティは、フロート状態ではないシェイプを作成することができる機能と共に、仕様書のレベル2に移動されました。当初は shape-inside が仕様書のレベル1に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。

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

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