CSSのgradient指定について知っておいたらドヤ顏できる（かもしれない）５つのこと

CSSのグラデーション指定、どうしてますか？

Photoshopなどでオブジェクトのグラデーションが指定してあったら CSSをコピー という機能でそのままCSSが生成できたり、 Ultimate CSS Gradient Generator みたいなサイトでCSSを生成させてそれを貼り付けたりする方法もありますが、できれば理屈や理論をある程度理解したうえで使いこなしてみたいものです。

意外と知らないことが多かったり、「なんとなく思った通りになった」程度で止まっている人も少なくはないのではないかと思いますので、おさらいも兼ねて見てみましょう。

1. gradient指定の理屈を知ろう

1: gradient指定には以下の４種類があります。

• 線形グラデーション linear-gradient()
• 円形グラデーション radial-gradient()
• 反復線形グラデーション repeating-linear-gradient()
• 反復円形グラデーション repeating-radial-gradient()

CSS Gradient Comparison

2: 丸括弧内の引数は３種類あります。

• size（サイズ定数。linear-系では使いません。詳細は後述）
• angle（角度）
• color / color-stop（構成カラーとカラーストップ、つまりカラーの区切り位置）

3: angleは省略可能で、defaultは 0deg == top == to bottom となります。旧仕様（？）では開始位置を top left のように記述していましたが、W3Cの勧告や多くの新しいブラウザでは to bottom to right のように到着地点を to xxx 型で示し開始位置を暗黙に示すのがルールになっています。¹

4: colorは最低ひとつ必要で、任意のカラーリテラル・hex値・rgb(rgba)値・hsl(hsla)値が使えます。

5: color-stopは省略可能で、省略した場合は0% ~ 100%間でよしなにブラウザが調整してくれます。任意の値は、px値や%などあらゆる単位が利用可能です。

6: 旧世代のブラウザでは -webkit- / -moz- / -o- のプレフィックスが必要になり、 to xxx 型の角度指定シンタックスが通用しない場合があります²。以下の Can I use... の右上が黄色くなっているところがプレフィックスが必要なブラウザバージョンです。

Can I use... - gradient

7: IE9以下では xxx-gradient() 自体が通用しないので、 filter プロパティを使用して progid:DXImageTransform.Microsoft.gradient() というめんどくさいことを書かなければいけませんが、IE9以下でグラデーションが付与されなくて情報設計に影響が出る例なんて存在しないと思っているので、せいぜいフォールバックがあれば問題ないでしょう。²

2. color / color-stopの指定を自在に操るために

前述の通り、カラー指定にはカラーとカラーストップが併記され、カラーストップは省略可能で、ブラウザがよしなに調整してくれます。たとえば以下のように。

ブラウザがよしなに分配してくれる例

background-image: linear-gradient(to right, red, green, yellow);

明示的に割合を指定する場合

background-image: linear-gradient(to right, red 50%, green 60%, yellow 70%);

場合によっては、領域をはみ出させる指定も可能

background-image: linear-gradient(to right, red 10%, green 150%);

3. 透明 (transparent) を扱うときは気をつけよう

transparent 値を使うときは、ブラウザによって表示結果が異なることに注意が必要だ。

transparentを含むグラーデーションを作ってみる

background-color: red;
background-image: linear-gradient(to right, transparent, white);

ChromeやFirefoxなどでは、以下のように表示されます。

上記は想定の範囲内だが、（一部の）FirefoxやSafariでは以下のように表示されてしまう！³

これは、transparent == rgba(0,0,0,0)であるというカラーリテラルの仕様を、FirefoxやSafariが忠実に踏襲してしまったことが原因である（だから、仕様的には実はこちらが正しいのである）。グラーデーションを指定するときは、ベースとなるカラーが必ずあるはずだから、たとえば#FFFFFFならrgba(255,255,255,0)とちゃんと書く癖をつけよう。⁴

4. radialのsize

radial-gradient() repeating-radial-gradient() にはサイズ定数があります。

• ellipsis（デフォルト値）
• closest-corner
• closest-side
• farthest-corner
• farthest-side
• 任意の数値

これについては言葉で説明するより図での紹介が手っ取り早いので、以下の画像に役を譲ります。

次の章「background-xxxプロパティとの連携」で述べるように、これらのradial-gradientはellipsisだけで再現することが可能で、実はサイズ定数は要らない子かもしれません。

5. background-xxxプロパティとの連携

background-imageプロパティで描画している以上、背景としてレンダリングされるので、あらゆるbackground-xxxプロパティとの連携が可能です。

background-sizeによる拡大・縮小

background-size: 50px 50px;

ポジションの移動も、background-image なので同様に可能です。

background-positionによる移動

background-size: 50px 50px;
background-position: 50% 50%;

background-repeat を併用することももちろん可能ですが、反復線形グラデーション repeating-linear-gradient() や、反復円形グラデーション repeating-radial-gradient() という専用の値も用意されているので、どちらを使うかはコーディングルールとして一貫性を保てればよいでしょう。

background-repeatによる繰り返し

background-size: 50px 50px;
background-repeat: repeat-y;

5. 複雑なグラデーションの実装を求められたときは

上記のようにいろいろな手法を説明してきたが、これらはあくまでも仕様とロジックについての解説であり、ケーススタディではありません。gradientの値を使うことで、表現技法として照明が当たっているような演出をしたり、縞模様やチェック柄のようなパターンをネイティブCSSで実装することも可能ですが、実運用ではデザイナーがそのデザインをPhotoshopで仕上げているはずなので、やはりCSSをコピーしたり、そもそもSVGを使うといったことも検討することを忘れてはならないでしょう。

1. deg 指定と to bottom to right 型のどちらを適用すればよいのかは、コーディングガイドラインとして各自が定めればよいと思います。これは、たとえば background-position を 50% と指定するのか center と指定するのかという点と同様です。 ↩

2. -webkit-gradient(linear, ...) という記述方式も一時期あった気がしますが、たぶん無かったことにして大丈夫です。なお、念のため補足するとIE5以下のようにグラデーションレンダリングそのものができないブラウザもあり、そのブラウザに対応する場合はフォールバックとして background-color を指定しておくのが慣習となっています。ただし、transparencyなgradientと重複させると background-color が見えてしまうので気を付けましょう。 ↩ ↩²

3. めんどくさいのでバージョンは調べていませんが、過去にそれで失敗したことがありました。 ↩

4. SassやScssを使っているならrgba(#FFFFFF, 0.x)と書いてもちゃんとRGB値に変換して出力するから、変数の管理も楽になります。しかし、minifyのプラグインがtransparent値に変換してしまう場合もあるので注意が必要です。 ↩