CSS3入門道場

グラデーション

画像編集ソフトなどではグラデーションは当たり前のようにある機能ですが、それをWEBで実現するには、以前は画像で表現するしかありませんでした。そこで、CSS3を利用すると、背景画像などに簡単にグラデーションを利用することができるようになります。とは言え、当初のグラデーションの実装は、各ブラウザベンダー間で統一が取れていませんでした。しかし、現在ではその状況も変わり、現在のモダンブラウザでは、ベンダープリフィックス無しで、統一されたグラデーションの記法を利用することができます。そこで、本章ではこの最新のグラデーション記法について見て行きます。ただ、古いブラウザもサポート対象にする場合は、以前のベンダープリフィックス有りの統一される前の書き方が必要になります。そんな時は、参考リンクにも掲げたCSS Gradient Generatorなどをご利用下さい。

メニュー

参考リンク

ブラウザサポート

本章で紹介するグラデーションは、下記を除き、全てのブラウザでサポートされています。
IEは9から、Android Browserの4.1、4.3はベンダープレフィックスが必要。4.4以降は不要。

参照:Can I use
Gradients
Repeating Gradients

linear-gradient

linear-gradientを使い、背景画像にグラデーションを利用することができます。まずは、シンプルなサンプルを見てみましょう。背景画像なので、background-imageプロパティを使います。

上記サンプルでは、白から黒へグラデーションさせています。デフォルトでは、上から下にグラデーションします。簡単ですね。では、グラデーションの方向を指定してみましょう。まずは、キーワードを指定する方法です。top, bottom, right, leftが利用できます。top right (右上)のように組み合わせることも出来ます。to の後に、目的の方向を指示します。方向の指定は、色の前に書きます。次のようになります。

to top rightの箇所が、方向の指定です。(左下から)右上に向かってグラデーションせよ、という指示になります。続いて、角度を使った方法も見てみます。単位(degree)のdegを数字の後に付けます。以下のようになります。

角度の方向ですが、下から上へが0度(=360度)となり、右へ(90度)、下へ(180度)、左(270度)となります。マイナスを使った場合は時計回りの逆になり、-45度は、315度と同じになります。

なお、to top rightと45degは、同じではないことに気をつけておきましょう。ボックスが正方形であればそうなりますが、長方形などの場合は違った角度になります。

色は、複数指定することができます。以下のようにします。

上記にあるように%を書いて色の地点を指定することができます。省略した場合、最初が0%、最後が100%の位置と解釈され、間の位置(色)は均等になるように配分されます。%以外にもpxなど指定できますが、これらは後のサンプルで見て行きます。

ここでは色の指定に分かり易いようにred, blueなどと指定していますが、もちろん#f00やRGB、HSLを使った色の指定もできます。続けて%を使ったサンプルを幾つか見てみます。

今度は、red 30%から始まっています。この場合、30%の地点まではredが持続します。そしてそこから50%の地点までblueにグラデーションしていきます。その後、70%の地点までgreenにグラデーションし、その後は、greenが持続します。

Copyright 2015 CSS3入門道場 All Rights Reserved.