グラデーションの基本（linear-gradient）を抑える

背景や枠線にグラデーション効果を表現できるcssプロパティ、linear-gradient。
働きを知っていると、グラデーションだけでなく幅広い表現が利用できます。

今後radial-gradientやconical-gradientを書くときに楽する為に細かく書くつもりですので、あまり必要なさそうな所は飛ばし読みでお願いします。

基本だけしっかりと抑えておきましょう。

INDEX

linear-gradientの基本
２色以上指定すれば自動でグラデーションにできる
グラデーションの角度や方向は決められる

linear-gradientの基本

最初に基本をまとめます

2色以上を指定するとグラデーション効果を作れる
すすむ角度・方向はワード・角度で指定できる
グラデーションのストップ位置や基準点を指定できる
colorではなくimageとして扱われる

ではこの順番にすすみます。

２色以上指定すれば自動でグラデーションにできる

最初にlinear-gradientのcssの書き方はこうです。

#{
  background:  linear-gradient(ここに指定が入る) ;
}

色はカラーコードでもrgba値でも色名でも。
仮に赤と黄色を指定すると、

# {
   background: linear-gradient(#f00 , #ff0 ) ;  /* カンマ区切りにします。*/
}

色のみ指定すると、グラデーションの方向は上から下です。
位置指定のない色と色の間は、それぞれの中間点を基準にしたグラデーションとなります。

グラデーションの角度や方向は決められる

linear-gradientは直線にすすむグラデーションです。
初期値では上から下方向のグラデーションでしたが、角度・方向を指定すれば自由に変更出来ます。

linear-gradientの角度・方向の指定方法

キーワードで指定する方法
角度で指定する方法
回転率で指定する方法　の３種類がありますが、linear-gradientで回転率を使う人をあまり見たことがないので、「キーワード」か「角度」が一般的です。

キーワードで方向・角度を指定する

表の通りです。

to top	下から上へ
to top right	左下から右上へ
to right	右へ
to bottom right	左上から右下へ
to bottom	上から下へ（初期値）
to bottom left	右上から左下へ
to left	右から左へ
to top left	右下から左上へ

「to top left」のところを「to left top」にしても問題ないですが、cssは多くのプロパティで上下を先、左右は後に指定するのでtop bottomを先に書くようにクセづけておく方が良いでしょう。

角度で指定する

上向きを0度として、そこから時計回りです（右が90度、下が180度）。マイナスの値も指定可能(270度と -90度は同じ)。

指定単位は「deg」です。degree（角度）ですね。

回転率で指定する

linear-gradientに関してこれは別に覚えなくても問題ないです。とばし推奨。
上向き方向を「０」として０〜１までの数字を使い、角度と方向を回転率で指定します。

数字が大きくなるほど時計回りに回転します。単位は「turn」。1turnで一周するので、0turnと1turnは同じです。

一周３６０度なので、0.1turnが36度、0.5turnで180度。小数点以下は何桁まで増やしてもエラーにならないようですが、普通に下2桁ぐらいまででしょう。

上のグラデーションをそれぞれの書き方で表したのが以下です。

# {
   background: linear-gradient(to right, blue , black , tomato ) ;
   background: linear-gradient(90deg, blue , black , tomato );
   background: linear-gradient(0.25turn, blue , black , tomato );
}

位置を指定できる

色のスタート位置とストップ位置は％で指定することができます。（0%から始まり100%で終了）
0%と100%の指定が無い場合は、それぞれ最初と最後に指定した色が適用されます。

たとえば先ほどのcss例で、最初の「#f00」にだけ50%と書き加えた場合、
０％〜50％までが#f00（グラデーションはなし）。残り半分には指定がないのでグラデーションを作ります。

# {
   background: linear-gradient(to right, #f00 50%, #eee , #ff0 ) ;
}

例では50％以降に指定がないので、#f00 から#eeeのグラデーションは50〜75%部分。#eee〜#ff0は75%〜100%という具合に等分され、それぞれの真ん中が色の中間地点になっていますが、
この中間地点をどこにするかも指定することができます。

#{
  background: linear-gradient(90deg, #f00 50% 70%, #eee , #ff0 );
}

50%のあとに空白区切りで70%と指定したのがグラデーションの中間ポイントです。

先ほどと比べ、2番めの#eeeまでのグラデーション幅が狭くなったのが分かると思います。

グラデーションは色と色の余白を埋める形で形成されるので、全ての色のスタート位置ストップ位置を隙間なく指定すると、カラーパレットとなります。

#{
  background: linear-gradient(
            90deg,
            #f00 0%,    　  /*スタート*/
            #f00 33%,　　/*ストップ*/
            #eee 33%,　   /*スタート*/
            #eee 66%,　　/*ストップ*/
            #ff0 66%,　　  /*スタート*/
            #ff0 100%　　/*ストップ*/
            )
}