WEBデザインでグラデーションを使うことはよくあります。これをWEBサイトに反映させるのに悩むことはありませんか？そのグラデーションの表現が例えばボタンデザインなど局所的なものなら、画像で切り抜いてbackground-imageで指定して使うこともできます。ただし、そのグラデーションの表現がbodyの背景だったり、広域にひろがるものだったり、さらに斜めにかかるグラデーションだったりするとなかなか難しいですよね。
これがcssで指定できたら便利だと思いませんか？実はそれcssだけで表現できるのです。
今回、はグラデーションの表現の中でも最も使われる線形のグラデーションの指定方法を紹介したいと思います。この方法を使うと、基本的なグラデーションを表現できるのはもちろん、複雑な表現も作れるようになります。
cssでグラデーションを作れることは知っているけど、ジェネレータで出来上がったものをコピペでしか利用したことがなく、自分で記述して指定するのは難しいと感じている人も、この記事を読んでもらえば、cssでグラデーションを指定するのは簡単だと理解していただけるかと思いますので是非ご一読ください。
実は私も「cssでグラデーション」を使い始めた当初、よくわかっていない部分があって、それを理解できてからグッと幅が広がったというポイントがあります。そんなポイントしっかり押さえつつ解説していきます。
基本】線形グラデーションを表現するlinear-gradient()の使い方
一番初めに知っておくべき重要なこと
線形グラデーションを扱えるlinear-gradient()はbackgroundプロパティ内で使える関数です。
グラデーションを扱える関数は他にも、円形グラデーションを扱える関数radial-gradient()や、線形グラデーションの繰り返しを扱えるrepeating-linear-gradient()、円形グラデーションの繰り返しを扱いるrepeating-radial-gradient()などがあります。
グラデーション系の関数で指定するとグラデーションが画像として生成されます。いいかえると、linear-gradient()などのグラデーション系の関数は画像と同じ扱いになります。なので、background-imageプロパティ内に指定することも可能です。
シンプルな線形グラデーション（右→左、上→下）
それでは、もっともシンプルなlinear-gradient()の例をもとに説明していきたいと思います。
グラデーション右→左
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00 , #00F); } |
結果
グラデーション上→下
|
1 2 3 |
.box{ background:linear-gradient(to bottom , #F00 , #00F); } |
結果
linear-gradient()の指定は変化する方向と色を「,」で区切って記述します。
上の2つの例でみると方向は、「to right」→左方向に、「to bottom」→下方向に。
色は、「#F00 , #00F」赤[#F00]から青[#00F]にグラデーション変化。
linear-gradient()などグラデーション系の関数では必ず2つ以上の色を指定する必要があります。
|
1 2 3 |
.box{ background:linear-gradient(#F00 , #00F); } |
結果
linear-gradient()は最低2色以上指定すれば動作します。その場合の変化方向は上から下（to bottom と同じ）になります。
線形グラデーションの角度を指定する
基本的な動きがわかったところで、まずは、変化する方向の指定方法を説明していきます。先ほどは、右→左、上→下の二方向の指定の仕方でしたが、もちろん斜めなど、これ以外の向きを指定することも可能です。ただし、グラデーションの中心点は、backgroundを指定する要素の中心点と同じになりますのでその点を考慮して方向を指定する必要があります。
角度を指定する方法には、キーワードでの指定方法と、数値での指定方法があります。
キーワードで指定
|
1 2 3 |
.box{ background:linear-gradient(to right bottom, #F00 , #00F); } |
結果
数値で指定
|
1 2 3 |
.box{ background:linear-gradient(45deg, #F00 , #00F); } |
結果
変化する方向を角度[deg]で指定することもできます、この例では中心点を経由して45度方向に変化するグラデーションが指定されます。
線形グラデーションの色の変化を指定する
次に色の方法を説明します。先に書いた通りグラデーション系関数は必ず2色以上の指定が必要になりますが、さらに複雑な組み合わせの指定も可能です。
複数の色で構成されたグラデーション
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00 , #0F0 , #00F, #000); } |
結果
２色以上の色を指定することも可能です。並んだ順にグラデーションが変化します。
色の比率を指定する
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00 , #00F 80%); } |
結果
linear-gradient()の場合、比率の指定は、0％から100％で指定します。上記の場合スタートの赤[#F00]の0％と終わりの100％が省略されていると考えてください。
これを解説すると、赤[#F00]が0％から80％の間、青[#00F]が0％から80％の間で変化して（0～80％で赤から青に変化）、80％から100％までは完全に青[#00F]ということになります。
もし、これを、0～50％までは赤、50％～20％で赤から青に変化、20％から100％は青色としたい場合は次のように書きます。
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00 50%, #00F 80%); } |
結果
色が混ざらないグラデーションカラー
これをグラデーションと表現していいのかわからないですが、下記のようにある地点を境に色を分けるような表現もできます。
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00 80%, #00F 80%); } |
結果
80％の位置で、赤8、青2で色を分けました。
【応用】linear-gradient()でこんな表現も可能です
グラデーションを透過させることもできます
「transparent」や「rgba()」をつかうと、グラデーションの片側を透過させるといったことも可能になります。
transparent
|
1 2 3 |
.box{ background:linear-gradient(to right , #F00, transparent); } |
結果
rgba()【透明度50％から0％】
|
1 2 3 |
.box{ background:linear-gradient(to right , rgba(255,0,0,0.5), rgba(255,0,0,0)); } |
結果
「transparent」と「rgba()」はいずれも、カラーコードと同じようにつかえます。「transparent」は色が透明になります。
複数のグラデーションや画像を重ねることもできます。
冒頭、「一番初めに知っておくべき重要なこと」でも触れたとおり、linear-gradient()等関数はbackgroundプロパティ内の画像と同じ扱いになるので、複数画像を重ねる指定に合わせて使用することが可能です。（background内で複数画像を指定する方法はこちら）
|
1 2 3 4 5 |
.box{ background-image:url(logo.gif) ,linear-gradient(to right bottom , rgba(255,0,0,0.5), rgba(255,0,0,0)), url(haikei.gif); background-position:center center,0 0, 0 0; background-repeat:no-repeat ,no-repeat , repeat; } |
結果
linear-gradient()を使った三角形の作り方
linear-gradient()関数を使うと下記図のような三角形を表現することも可能です。
詳しい作り方を別の記事で載せていますのでそちらも是非ご確認ください。
三角矢印みたいなデザインもcssだけで簡単に作れるのでとっても便利です。
