Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2011年5月 > CSSグラデーションでの角度の解釈

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2011年5月18日

CSSグラデーションでの角度の解釈

フロントエンド・エンジニア 矢倉

CSS Image Values and Replaced ContentモジュールのeditorであるTab Atkins Jr.の名前で、CSS WG Blogやメーリングリスト、CSS3.infoに、グラデーションの角度表記とその方向について意見を募っています。

linear-gradient()の表記

Image Valuesのlinear-gradient()では、同じグラデーションをいくつかの書き方で指定できます。

たとえば、ボタンなどに浮き上がったように見える効果を与えるため、上に薄い色、下にそれよりも濃い色を指定するケースはグラデーションの最も多いユースケースでしょう。現在の草案で、一番簡単な指定は次になります。

background-image: linear-gradient(#eee, #ccc);

角度による表記を使うと、次のようにも書けます。

background-image: linear-gradient(-90deg, #eee, #ccc);

この例では「-90deg」を加えただけなので冗長に見えますが、垂直/水平でないグラデーションを利用する場合には角度の記述が必要になります。

「-90deg」はどう解釈されるべきか

今回意見を求めているのは、この角度表記とグラデーションが伸びる方向の関係です。ひらたく言うと、「-90度は上向きなのか横向きなのか下向きなのか」ということです。

linear-gradient()の角度は、水平方向の右を0°とし反時計回りに回転するものと解釈されます。360°は0°となり、また負の値は時計回りに回転します。

図:linear-gradient(45deg, white, black)の指定。現在の仕様では、左下に白、右上に黒というグラデーションを描画する。

しかし、角度を扱うtransformプロパティのrotate()関数や、それが参照するSVGにおいては、0°が水平方向右なのは同じものの、反時計回りに回転するのです。

また、感覚的な問題もあります。直接角度と関わるわけではありませんが、borderプロパティなどは上、右、下、左と方位角(0°が北)のような指定順を採用しています。こちらに合わせたほうが感覚的に分かりやすいという意見もあるようです。

というわけで、CSS WGでは次の3つのうちどれが良いかを募っています。

BかCとなると、現状の実装と互換性がなくなりますから、なかなかに難しい選択でもあります。

追記 (2011-10-20)

その後、2011年7月12日付の草案にて、案Cが採用された新しい仕様に更新されました。たとえば、上から下に変化するグラデーションは、180degとなります。