Web Marina

日々の業務や勉強などで得た知識をアウトプットしていきます。

【CSS】liner-gradient 〜CSSで線形グラデーション〜

f:id:song-of-life1352607:20190903130934p:plain

こんにちは、マリンです。

今回はCSSで線形グラデーションを実装する方法です。

今までなんか難しそうだったから

コピペでなんとなく使っていたのですが、

仕組みをちゃんと理解しようと思って勉強しましたので、

ここでまとめます。





liner-gradientとは

CSS3にある線形グラデーションを実装するための関数です。

引数にグラデーションの方向や角度、色などをしていすることで、

要素に対して複雑なグラデーションを表現することができます。


liner-gradientの仕組み

ちょっと難しい話なのですが、詳しい内容はこちらで説明してくださっています。

developer.mozilla.org

理解力が乏しいので、間違っていたらご指摘ください。

乏しいなりに解釈したポイントを以下にまとめます。


liner-gradientは画像である

二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は gradientデータ型のオブジェクトであり、これはimageの特殊型です。

何となく難しいのですが、つまるところ

グラデーションは色扱いではなく画像扱い。

ということです。

指定した2色以上の間でちょっとずつ色を変えていった直線を

並べることでグラデーションを表現した画像?

と勝手に理解しています。


ですので注意すべきは

background-colorなどの色を指定するプロパティには使えない という点です。

私も実際一度失敗しています。使えませんでした。

なんで??と思ったけど、これですっきりです。


寸法は要素と同じ

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

この部分を読む限り、このliner-gradient自体には決まったサイズはないようですね。

なので、適用させる要素のサイズ = liner-gradientのサイズ

ということのようです。


グラデーションの角度は軸の角度で決まる

線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

liner-gradientには適用するボックスの中心を通る(見えない)軸があり、

グラデーションの角度はこの軸の角度によって決まっています。


ポイント地点は軸に対して直角に交わる交点

そしてこの軸に対して開始地点、終了地点、中間地点を示す、

直角に交わるポイントを指定することで変化をつけます。

最初の画像のところに書いたちょっとずつ色の違う線が、

このポイントから順番に引かれていくことでグラデーションになるのかな?

上記の中間地点に関しては細かく、そして複数設定することが可能ですが、

特に指定のない場合は、前後の点の真ん中が中間地点となります。


liner-gradientの構文

続いて構文について記載します。

linear-gradient(グラデーションの角度または方向, 開始色, 中間色, 終了色);
  • 角度、方向: 角度であればdegを付けた角度値、方向ならtopなどのキーワードで指定できる。

  • 開始色: rgbやrgba、キワードで指定でき、%をつけると、その位置を指定できる。

  • 中間色: 上に同じ。複数指定可能。

  • 終了色: 開始と同じ。




角度については0deg90degなどのように

軸の角度値を指定することで決められます。

方向でしたらto topto bottomto leftのように

何処〜というキーワードを指示してあげます。

開始と終了の色については

キーワード、rgb、16進法など通常の色指定ができます。

また、スペース区切りでパーセンテージを指定すると、

その位置を指定できます。

中間についても開始、終了と指定方法は同じで、

更に複数指定することで間に様々な色を入れたグラデーションを作れます。


グラデーションの参考サイト

最後に勉強させていただいたサイトと、

様々なグラデーションの例を見られるサイトをご紹介します。

リファレンス

いつもお世話にな入ります。Mozillaさんのリファレンスです。

とても詳しい解説が載っています。

developer.mozilla.org

こちらもいつもお世話になります。HTMLクイックリファレンスさんです。

とてもわかりやすい使い方が載っています。

www.htmq.com




参考サイト

Webクリエイターボックスさんです。

めちゃめちゃキレイなグラデーションの書き方が載っています。

www.webcreatorbox.com

Web屋tmさんです。

カッコいいメタリックなグラデーションをお探しならこちら。

webya-tm.com




まとめ

いかがでしたでしょうか?

いつもは最後の参考サイトさんのものをコピペして使っていました。

だって引数がいっぱいあってなんだか難しそうだったんですもん!!

でもちゃんとリファレンス読んで見れば難しいことはなかったです。

1つ目は角度(もしくは方向)、2つ目は開始色(と位置)、最後が終了色(と位置)、

そしてそれ以外が中間色とその位置で、

それらを工夫することで美しいグラデーションや、

カッコいいメタリックなグラデーションを表現していたんですね。

これがマスターできればWebのデザインにも幅が広がりそうです。