対象: CSS
難易度: ★☆☆
所要時間: 約5分
今回はCSSを使用して、グラデーションをかける方法をご紹介します。この方法を覚えるとサイトの背景やボタンなどの表現の幅が広がります。
ボタンのホバー時に立体感を出したい時や、ヒーローセクションの背景に奥行きを出したい時、画像の上に暗いグラデーションを重ねて文字を読みやすくしたい時など、実務でよく使われる場面が多いテクニックです。
CSSの書き方
グラデーションを適用したい箇所に、backgroundプロパティ、またはbackground-imageプロパティの値に「 linear-gradient(色)」を指定します。
基本的には background: linear-gradient(to 方向 or 角度 ,開始色 ,終了色)というように書きます。
まずは色のみを指定してみましょう。今回は#fad0c4から#ffd1ffへのグラデーションを指定します。そうすると下の画像のようなグラデーションができます。この時のグラデーションの方向は上から下に向かいます。
background: linear-gradient(ここに色を指定);
/*
例 body {background: linear-gradient(#fad0c4, #ffd1ff);}
*/
グラデーションの方向を変更
以前はSafariなど一部ブラウザ向けに-webkit-linear-gradientを別途書き、開始位置と方向の指定方法が微妙に異なるため混乱しやすいポイントでした。現在はChrome・Safari・Firefox・Edgeなど主要ブラウザすべてでプレフィックスなしのlinear-gradientが使えるため、この記事でも通常の書き方だけをご紹介します。
上下左右方向へのグラデーション
先ほど書いたコードに、方向の指定を追加していきます。右に向かうグラデーションを作りたい場合は、色指定の前にto rightを追記します。「,(カンマ)」を忘れないようにしましょう。
background: linear-gradient(to 方向, 開始色, 終了色);
body {background: linear-gradient(to right, #fad0c4, #ffd1ff) fixed;}
方向を指定することで、下のような左から右に向かうグラデーションとなりました。
この時、方向を「to top」や「to bottom」と指定してあげれば上方向や下方向へのグラデーションとなります。
斜めにグラデーションをかける
上下左右へのグラデーションをかける時に方向を指示しましたが、方向を2つ指定してあげることでグラデーションの方向が斜めとなります。
方向を2つ組み合わせて方向を指定するので、左上から右下へのグラデーションは「to bottom left(左下へ)」と書きます。少しわかりにくいですが、これで左上から右下へのグラデーションになります。わかりやすくするため、片方の色を白(#ffffff)にしてみました。
background: linear-gradient(to bottom left, 開始色, 終了色);
body {background: linear-gradient(to bottom left, #fad0c4, #ffffff) fixed;}
細かく角度を指定する
上記の方法だと45度の角度でしか指定できませんが、数字で指定することも可能です。傾きは、0~360の角度の度数に単位（deg）をつけるだけです。0degは上から下に。そこから数値を上げると、時計周りに角度がついていくイメージです。
background: linear-gradient(傾きdeg, 開始色, 終了色);
body {background: linear-gradient(225deg, #fad0c4, #ffffff) fixed;}
以上、CSSで基本的なグラデーションをかける方法をご紹介しました。backgroundプロパティにlinear-gradientを指定するだけの簡単な作業なので、しっかり覚えておきましょう。
まとめ
background: linear-gradient(方向, 開始色, 終了色);の形で指定する- 方向は「to right」のようなキーワードのほか、0〜360degの角度でも細かく指定できる
- -webkit-などのベンダープレフィックスは、現在の主要ブラウザではもう不要
