CSS Shapes の新しい文法

この記事は、Web Platformチームブログに2014/2/11に投稿された記事「New CSS Shapes Syntax」を翻訳したものです。

CSS Shapes の仕様がラストコールになりました。その際、たくさんの文法の変更が行われ、アドビはそれにあわせて Blink と WebKit の実装を更新しました。変更された仕様の概要は以下の文をお読みください。

サンプルについての注意事項

もしこの記事を読んで、CodePen に公開されている実際のサンプルを見たいと思ったら、CSS Shapes をサポートするブラウザーを入手し、機能を有効にしてください。興味のある方のために、ブラウザーサポート情報ページに、利用可能なブラウザーと、機能を有効にする方法が紹介されています。

Box の値

新しい仕様では、CSS Box モデルの要素を使ってシェイプを定義します。シェイプは margin-box, border-box, padding-box, content-box のいずれの要素にも宣言できます。シェイプは要素に定義された border-radius に従います。CodePen に、Box の値がシェイプの指定に使われている例が公開されています。

基本的なシェイプを指定する際、box の値を指定できます。この値はシェイプから参照用に使われる “参照 box” を定義するものです。シェイプの大きさや位置を決める際、その box が標準の box の代わりに使われます。標準の box は、値を設定する属性によって異なります。shape-outside は margin-box が clip-path は border-box が標準の box です。例えば、以下の例は、マージン、パディング、ボーダーの指定により、全く異なる円の定義となるでしょう。

shape-outside: circle(); shape-outside: circle() content-box;

circle() が何者か分からなくても心配する事はありません。全ての形の変更点は次の章で説明します。

基本の形

基本シェイプ (basic shape) は CSS Shapes の中心的な存在です。ほとんどのシェイプが SVG スタイルの文法から一般的な CSS 属性と同様の文法に変更されました。多角形を例外として、その他の全てのシェイプで大幅な変更が行われています。

rectangle と inset-rectangle は inset に変更

inset が rectangle と inset-rectangle を置き換えました。このシェイプは、基準となる box から指定された分内側の位置に辺を持つ長方形です。

inset の基本文法

inset の基本的な文法は margin によく似ています。数を 1 つだけ指定すると、その値が 4 つの辺全てに適用されます。

inset(value)

2 つの値を指定すると、最初の値は inset の上下、次の値は inset の左右に適用されます。

inset(top_bottom right_left)

3 つの値も指定できて、最初の値が上、次の値が左右、最後の値が下の辺への指定になります。

inset(top right_left bottom)

最後に、4 つの値を指定すると、それぞれの辺に個別の値を指定できます。

inset(top right bottom left)

CodePen に異なる値を指定した inset の例が公開されています。

角を丸くする

これで終わりではありません。上のどの指定の形でも、round キーワードとおなじみの border-radius の文法で生成される長方形の角丸を指定できるのです。とても簡単な例は、

inset(30% round 10%)

もちろんもっと複雑な指定も可能です。

inset(10% round 10% 40% 10% 40%)

CodePen でより複雑な inset シェイプの例を見る事ができます。

circle と eclipse – 同じ名前だが使い方が変更された

circle と ellipse は引き続き使用できます。しかし、指定できる値は大幅に変更されました。

半径の指定方法

はじめに、半径はもはや専用の長さや割合ではありません。半径を指定するための 2 つの新しいキーワードは、closest-side と farthest-side です。どちらもシェイプの中心から基準となる box の辺までの距離を示すキーワードです。

closest-side

closest-side は、シェイプの中心座標から参照 box の辺の中で最も近いものへの距離です。円の場合は、単純に円の中心から各辺への距離を調べ最短の値を使います。楕円の場合はもう少し複雑です。水平方向 (rx) と垂直方向 (ry) の 2 種類の半径があるからです。楕円の closest-side の値を計算するには、関係する方向の辺との距離だけを考慮します。例えば、ry に最も近い辺を見つけるなら、中心点と縦方向にある２つの辺との距離だけ比べればよいでしょう。

具体的な例として、circle() は circle(closest-side) と同じ意味で、参照 box に収まる最大の円を定義します。また、ellipse() は ellipse(closest-side closest-side) と等価であり、参照 box に収まる最大の楕円を定義します。CodePen で closest-side を使って定義された円と楕円のサンプルが見れます。

farthest-side

farthest-side は closest-side と似ています。シェイプの中心点から参照 box の最も遠い辺までの距離です。こちらもこれまでと同様 CodePen に farthest-side を使ったサンプルが公開されています。

中心の指定方法

変更されたのは半径だけではありません。CSS position をフルに使ってシェイプの中心を定義できます。この場合は at キーワードを使い、その後に位置を記述します。一例としては、

circle(closest-side at center)

そして、CodePen の例を見たい方は位置を指定したサンプルをどうぞ。

ここまで読んできた方には、上の結果が circle() の例のときと全く同じであることに気づかれたかもしれません。それは、上のコードが、値を省略した場合に使われる値の完全な記述だからです。circle(at center) も同じ結果になる別の記述方法です。全ての引数は省略可能で、指定しない場合に使われる値が決まっています。

もちろん、円や楕円を中心以外の点に配置できます。全てのオプションを紹介するのはこの記事の目的ではありませんが、少しだけ紹介しましょう。

ellipse(at top 50% left 20%) circle(25% at 25% 50%)

いろいろと試してみたい方、または実際に見たい方は CodePen の位置を指定した楕円や円のサンプルをご覧ください。

シェイプの使い方

CSS Shapes には shape-outside という属性があり、float 指定された任意の形のシェイプの周囲をコンテンツで囲むような指定ができます。ここまでの全ての例で shape-outside を使用しています。さらに、シェイプは CSS masking からの clip-path にも使用できます。記事内のサンプルを注意深く見れば、シェイプの可視化のために clip-path が使われていることが分かるでしょう。