CSS シェイプの概要

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

• shape-outside — 基本的なシェイプを定義することができます
• shape-image-threshold — 透過度のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。
• shape-margin — 定義されたシェイプの周囲のマージンを設定します。

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-threshold が 0.0 (初期値) である場合、領域は完全に透過になります。値が 1.0 である場合は完全に不透過になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。

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

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

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

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

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

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

シェイプを作成するために使われる基本シェイプとボックス値は、 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 の設定を有効にした場合のみです。

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