今回はCSSを使用して、グラデーションをかける方法をご紹介します。この方法を覚えるとサイトの背景やボタンなどの表現の幅が広がります。
CSSの書き方
グラデーションを適用したい箇所に、backgroundプロパティ、またはbadkground-imageプロパティの値に「 linear-gradient(色)」を指定します。
基本的には background: linear-gradient(to 方向 or 角度 ,開始色 ,終了色)というように書きます。
まずは色のみを指定してみましょう。今回は#fad0c4から#ffd1ffへのグラデーションを指定します。そうすると下の画像のようなグラデーションができます。この時のグラデーションの方向は上から下に向かいます。
background: linear-gradient(ここに色を指定);
/*
例 body {background: linear-gradient(#fad0c4, #ffd1ff);}
*/
グラデーションの方向を変更
上下左右方向へのグラデーション
先ほど書いたコードに方向を指定して行きます。注意点としましてはベンダープレフィックス付きの書き方が異なります。通常は向かう方向を指定しますが（例/ to right）ベンダープレフィックスの場合は開始位置を指定します。(例/ left)
では右に向かうグラデーションを作成してみます。先ほどのコードの色指定の前にto rightと追記します。※「,(カンマ)」を忘れないようにしましょう。
background: -webkit-linear-gradient(/*開始位置*/, 開始色, 終了色);
background: linear-gradient(/*to 方向*/, 開始色, 終了色);
body {background:linear-gradient(to right,#fad0c4, #ffd1ff) fixed;}
方向を指定することで、下のような左から右に向かうグラデーションとなりました。
この時、方向を「to top」や「to bottom」と指定してあげれば上方向や下方向へのグラデーションとなります。
斜めにグラデーションをかける
上下左右へのグラデーションをかける時に方向を指示しましたが、方向を2つ指定してあげることでグラデーションの方向が斜めとなります。
ベンダープレフィックスの場合は開始位置を指定するので、左上から右下への場合「top right(右上から)」と書きます。
また、通常のコードの場合は方向を指定するので「to bottom left(左下へ)」と書きます。どちらも左上から右下へのグラデーションとなります。わかりやすくするため片方の色を白（#ffffff）にしてみました。
background: -webkit-linear-gradient(/*top right*/, 開始色, 終了色);
background: linear-gradient(/*to bottom left*/, 開始色, 終了色);
body {background:linear-gradient(to bottom left,#fad0c4, #ffffff) fixed;}
細かく角度を指定する
上記の方法だと45度の角度でしか指定できませんが、数字で指定することも可能です。傾きは、0~360の角度の度数に単位（deg）をつけるだけです。0degは上から下に。そこから数値を上げると、時計周りに角度がついていくイメージです。
※ベンダープレフィックスをつける場合は「ベンダープレフィックス付のdeg ＝ 90 – 通常のdeg」という式でdegを出します。通常の書き方とは異なるので注意しましょう。
background: -webkit-linear-gradient(/*90-傾きdeg*/, 開始色, 終了色);
background: linear-gradient(/*傾きdeg*/, 開始色, 終了色);
body {background:linear-gradient(225deg,#fad0c4, #ffffff) fixed;}
以上CSSで基本的なグラデーションのかけかたをご紹介しました。
backgroundプロパティ にlinear-gladientを指定するだけの簡単作業なので、しっかり覚えて置きましょう！
最後までお付き合いいただきありがとうございました！
