CSS グラデーションを表現する「linear-gradient」の書き方・使い方

linear-gradientとは、CSSのbackgroundを使う時、背景にグラデーションを作るための関数の1つです。

background: linear-gradient(ここに色を指定);のように記述して、色々なグラデーションを表現することが出来ます。

グラデーションを使いこなせると、透過した背景を画像に重ねてモダンなWebサイトを作ったりできます。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

linear-gradientとは?

linear-gradientとは、CSSでグラデーションをかける時にbackgroundに指定する関数の1つです。

下記のように、backgroundlinear-gradient()を使って、backgroundのグラデーションを指定します。

background: linear-gradient(〜〜〜);

後で詳しく解説しますが、「〜〜〜」の部分にどの方向どういう色からどういう色にグラデーションするという設定を書きます。

linear-gradientは、英語の意味からわかるように「1つの方向に向かってグラデーションをする」という設定になります。

linear-gradientの使い方・書き方

linear-gradientを使うには、まずはじめに3つの情報が必要です。

  1. どの方向からグラデーションするのかを決める
  2. 始まりの色を決める
  3. 終わりの色を決める

この3つの情報があれば、関数の書き方に当てはめていくだけで、グラデーションを作ることが出来ます。早速、書き方を解説します。

background: linear-gradient(グラデーションの方向, 始まりの色, 終わりの色);

グラデーションの方向は「角度」か「キーワード」を指定します。角度は「0deg, 90deg, 180deg, 270deg」のような感じです。キーワードはto top, to bottom, to left, to rightのような感じです。

色関連は、16進数表記や、rgbrgba表記が使えます。

では、実際にlinear-gradientを使った例を紹介します。

左から右へグラデーション

緑から黄色のグラデーションを右方向にかけています。右方向にかけるため、to rightを指定している部分がポイントです。

上からへグラデーション

緑から黄色のグラデーションを下方向にかけています。下方向にかけるため、to bottomを指定している部分がポイントです。

linear-gradientでグラデーションの変化位置を変える

今までの書き方は、グラデーションの色が変化する位置を 0% の場所になるグラデーションの方法を紹介していました。

ここでは、そのグラデーションの変化を開始する部分を変える方法を紹介します。

グラデーションの変化する位置を変える方法

例えば開始色を 40% で設定すると、要素の左40%は全部開始色と同じ色になります。

このグラデーションを表現するCSSの書き方は下記の通りです。

background: linear-gradient(to right, #78e455 40%, #f5f53f);

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ