linear-gradient()の基本的な使い方と、背景として私がよく使う見せ方をご説明します。
linear-gradient()の基本
linear-gradient(方向（角度）, 開始色, 終了色);
See the Pen linear-gradient-sample01 by muko (@mkpn) on CodePen.
これが基本になります。
細かいパラメータにつきましては、下記リンクからご確認ください。
【mozilla.org】linear-gradient()
方向を角度にして、3色で表示
See the Pen linear-gradient-sample02 by muko (@mkpn) on CodePen.
色数は何色でも設定できます。また角度に関してはマイナス（―）値の設定も可能です。
グラデーションの割合を指定する
See the Pen linear-gradient-sample03 by muko (@mkpn) on CodePen.
数値はパーセント（％）以外にも、ピクセル（px）での指定も可能です。
linear-gradient()を背景として使う
上のサンプルのようなグラデーション表現は、私は正直あまり使いません。
使う時は、あまりグラデーションさせずに使うことが多いです。
グラデーションさせずに、2色の背景として使う
See the Pen linear-gradient-sample04 by muko (@mkpn) on CodePen.
See the Pen linear-gradient-sample05 by muko (@mkpn) on CodePen.
※ 右上の『CODEPEN』を押すと拡大してご確認できます。
LPだったり、LPっぽい長めのページなどを作るとき、よく上のような『linear-gradient()』を使います。
一見すると、コーディングで悩みそうな感じがするのですが、『linear-gradient()』を使うとイッパツで処理できますし、見た目も凝ったレイアウトに見えるので、重宝してます。
背景に縦線をcssで引く方法を解説します。
