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

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

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

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

linear-gradientの基本

最初に基本をまとめます

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

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

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

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

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

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

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

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

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

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

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

キーワードで指定する方法
角度で指定する方法
回転率で指定する方法 の3種類がありますが、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に関してこれは別に覚えなくても問題ないです。とばし推奨
上向き方向を「0」として0〜1までの数字を使い、角度と方向を回転率で指定します。

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

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

 

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

#hoge {
   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%と書き加えた場合、
0%〜50%までが#f00(グラデーションはなし)。残り半分には指定がないのでグラデーションを作ります。

#hoge {
   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までのグラデーション幅が狭くなったのが分かると思います。

 

グラデーションは色と色の余白を埋める形で形成されるので、全ての色のスタート位置ストップ位置を隙間なく指定すると、カラーパレットとなります。
分かりやすく改行し、0% 100%も省略せずに書いてみます。

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

-gradientはimage

-gradientプロパティはcolorではなくimageとして扱われますので、
本文中では省略していましたが「background-color」ではなく「background-image」です。

グラデーションが色ではなくimageというのは感覚的に変な気がしますが、imageですので複数配置も可能です。

 

くどい説明になりましたが、
「方向と角度の決め方」と
「スタートとストップの位置指定」
だけ抑えておけば、まぁ大丈夫だろうと思います。
ご参考になりましたなら。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

HTML/CSScss,linear-gradient

Posted by ミフネWEB