Web制作では、「HOME」とかのメニューや、「お問い合わせはこちら」のボタンなどを、画像ではなくCSSを駆使して作る機会も多いです。
しかし、枠線をつけたり背景色を指定したりするだけでは、「何かが足りない感」が出てしまうこともあります。
まずは具体例をご覧ください。
お問い合わせはこちら
お問い合わせはこちら
上のサンプルが背景色（単色）で、下のサンプルがグラデーション背景です。
border-radius（角を丸くする）や、box-shadow（影をつける）を指定しているので、上のサンプルでもボタンには見えますし、何か致命的な問題があるというわけではないのですが、やや立体感に欠けていてのっぺりとした感じがあります。
一方、グラデーション背景のサンプルは光が当たっているように見えることで立体感が出ており、よりボタンっぽさが出ていると言えます。
ボタンは全てグラデーションにした方が良いというわけでは決してないのですが、表現手法は多いに越したことはありません。
というわけで、今回はbackground-image: linear-gradient()で、要素の背景をグラデーションにする方法を紹介します。
要素の背景をグラデーションにする
要素の背景をグラデーションにするには、該当の要素にbackground-image: linear-gradient(＊)というCSSを設定します。（＊にはグラデーションの色などの指定を記述）
単色を指定すれば良いだけのbackground-colorプロパティと違い、グラデーションには様々な設定を指定することができます。
その分様々な表現ができるのですが、逆に言えばかなり複雑な指定も可能であり、Web制作初心者がいきなりマスターしようとするにはややハードルが高いとも言えます。
なので、グラデーションの方向や細かい色の配分などはさておき、まずはグラデーションを設定する方法だけ覚えていきましょう。
まず、background-image: linear-gradient(＊)の「＊」の部分に、グラデーションにしたい色を２色以上指定します。
具体的には以下のような構文になります。
＊linear-gradient()の構文例＊
{ background-image: linear-gradient(red,blue); }
注意点としては、色と色の指定の間は
,
で区切るという点です。
それでは注意点に注意しながら、表示結果とサンプルコードを見てみましょう。
背景をグラデーションにする
<p>背景をグラデーションにする</p>
p {
width: fit-content;
margin: 2rem auto;
padding: 10px;
background-image: linear-gradient(yellow,orange);
color: white;
}
▲要素の上から下に向かって、red（赤）→blue（青色）にグラデーションにすることができました。
サンプルではグラデーションが分かりやすいように、赤と青という色の組み合わせにしていますが、グラデーションにする場合は黄色とオレンジなど類似色でまとめるのが基本です。（下のサンプルを参照）
背景をグラデーションにする
色味が異なる組み合わせのグラデーションは配色が難しく、見づらくなってしまう危険性が高いので、デザインや色に関してある程度勉強してからの方が良いかもしれません。
サンプルでは上から下へのグラデーションになっていますが、次章ではグラデーションの方向を調整していきます。
POINT!
- ・background-image: linear-gradient()で、背景をグラデーションにできる！
- ・（ ）の中には、グラデーションにしたい色を２色以上指定する！
- ・グラデーションは、基本的に同系統の色でまとめた方が良い！
グラデーションの方向を指定する
グラデーションの方向を何も指定しない場合、上から下へのグラデーションになってしまいますが、グラデーションの方向も指定可能です。
指定の方法は、色の指定の前にキーワードで指定もしくは、数値で角度を指定します。
まずはキーワードで指定する方法から確認していきましょう。どのようなキーワードがあるのか、下の表をご覧ください。
| キーワード | 説明 |
| to left | 右から左に向かうグラデーション |
| to right | 左から右に向かうグラデーション |
| to top | 下から上へ向かうグラデーション |
| to bottom | 上から下へ向かうグラデーション（規定値） |
| to left top | 右下から左上に向かうグラデーション |
| to right top | 左下から右上に向かうグラデーション |
| to left bottom | 右上から左下に向かうグラデーション |
| to right bottom | 左上から右下に向かうグラデーション |
▼下は、linear-gradient( to left top, red, blue);とした時のサンプルです。
左上に向かって、赤色から青色のグラデーションになっています。
背景をグラデーションにする（左上に向かうグラデーション）
グラデーションの方向（キーワード指定）を自由に変えられるようにしたサンプルも用意したので、キーワードによってグラデーションの方向が変わるのを実際に確認してみてください。
グラデーションの方向をキーワードで指定
垂直・真横とか、定型（傾き45度）の斜めであれば▲上で紹介したキーワード指定が早くて楽なのですが、グラデーションの向きを細かく指定するには角度を数値で指定する必要があります。
例として、傾き60度で左下→右上のグラデーションにしたければ
{ background-image: linear-gradient( 60deg, red, blue); }
というように指定します。
また、左上→右下へのグラデーションは120deg、右下→左上は-60deg…というように角度を変えることで向きを変えることも可能です。
用語解説：deg（Degree）
ちなみに、degの他には回転の度合いを表す「turn」を使った指定方法もあるのですが、角度を直接表す「deg」の方がわかりやすいかと思います。
それでは、数値＋deg指定で値を自由に設定できるサンプルを用意したので、色々な数値を入れて遊んでみてください！
グラデーションの方向（角度）を数値で指定
deg
POINT!
- ・グラデーションの方向を指定するには、色の指定の前にキーワードか数値の指定を追加する！
- ・キーワードは垂直や水平、斜め45°など定型的な方向を指定できる！
- ・数値＋degで指定すると、グラデーションの細かい傾きも調整可能！
グラデーションの開始位置
これまでのグラデーションは、グラデーションの開始に指定した色から終了に指定した色まで、同じ割合で徐々に色が変わっていくようになっていました。
しかし、色が変わり始めるタイミングを調整したいということもありますよね。
この章では、グラデーションの色が変わり始めるタイミングを指定する方法を解説していきます。
グラデーションのタイミングを調整するには、グラデーションカラーの指定の後にグラデーションの開始点（２色目以降は開始点＆終了点）を数値＋％で指定します。
たとえば、赤→青のグラデーションで、グラデーションラインの70％の位置から色が変わり始めるようにしたい場合は、
{ background-image: linear-gradient(to right, red 70%, blue); }
というふうに指定します。こうすることで、70％の位置まではグラデーションせずに赤色が保たれます。そしてグラデーションの開始点となる70％を超えたところで、青色に向かったグラデーションが始まるということになります。
グラデーションの開始点を70%に指定
ちなみに、何も設定しない場合は、▼のようになります。
グラデーションの開始点を指定しない
また、最後に指定した色に関しては、グラデーションの終了点になります。
たとえば、linear-gradient(to right, red, blue 30%);とすれば、グラデーションラインの30％の位置でグラデーションが完了し、それ以降は青色が維持されるということになります。
グラデーションの終了点を30%に指定
このグラデーションの開始点・終了点の指定を利用することで、グラデーションにせずに、縞模様にすることも可能です。
次のサンプルは、linear-gradient(to right, red 30%, blue 30%);と設定することで、30％の位置でパッと色が切り替わるようにしています。
開始点と終了点を30%に指定
また、グラデーションを３色以上に設定する場合、間に挟まれる色は開始点と終了点の２つが存在することになります。
どちらとも存在する場合は、終了・開始の両方の点を指定可能です。▼
（赤→青）のグラデーション終了点を20%、（青→深緑）のグラデーション開始点を80%に指定
<p>（赤→青）のグラデーション終了点を20%、（青→深緑）のグラデーション開始点を80%に指定</p>
p {
width: fit-content;
margin: 2rem auto;
padding: 10px;
background-image: linear-gradient(to right, red 20%, blue 20% 80%,darkgreen 80%);
color: white;
}
POINT!
- ・グラデーションの位置を調整するには、グラデーションカラーの開始／終了位置を指定する！
- ・グラデーションカラーの開始／終了位置は、数値＋％で指定する！
- ・開始位置と終了位置を重ねることで、グラデーションさせずに背景色を切り替えることも可能！
背景グラデーション＋背景画像
背景グラデーションは背景画像と組み合わせることもできます。
設定の仕方は簡単で、linear-gradient( )の後を
,
で区切って、続けてurl( )で画像のファイルパスを指定するだけです。
ただし、グラデーションカラーをキーワード値ではなく、rgbaなど色の透明度が指定できる方法で透明度をつけて指定しなければ、グラデーションに隠れて画像が見えなくなってしまうので注意が必要です。
ではさっそく、表示結果とサンプルコードを確認していきましょう。
<div>
<p>背景画像＋グラデーション</p>
</div>
div {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(255, 255, 255, 0.74)),
url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
width: 100%;
max-width: 600px;
height: 300px;
background-size: cover;
margin: 2rem auto;
color: white;
}
ちなみに、元の画像はこんな感じです。
▼のグラデーションを設定した上で、▲の画像を背景画像として設定しています。
これを、背景画像の指定→グラデーションの指定としてしまうと、背景画像に隠れてグラデーションが見えないということになるので、指定の順序も大切です。（＊背景画像の指定の記事はこちら）
グラデーションと背景画像を組み合わせることで、画像編集ソフトに頼ることなく、画像を装飾することができます。
また、画像編集ソフトで画像そのものにグラデーションをかけてしまうと、後でグラデーションの色を変更したいとなった時に画像を作り直す必要が出てきますが、CSSで調整していればプロパティの値（色の指定）を変更するだけで良いので楽です。
POINT!
- ・背景グラデーションは背景画像と組み合わせることができる！
- ・方法は、linear-gradient()の後を,（カンマ）で区切り、続けてurl()で背景画像のファイルパスを指定するだけ！
- ・グラデーションの色は透明度を指定しなければ、背景画像が見えなくなってしまう！
- ・グラデーションの指定→背景画像の指定という順番で指定すること！
