Title

linear-gradientとは

linear-gradient とは次の語句からなるCSSの関数です。

linear

読み: リニア
意味: 直線、線状

gradient

読み: グラディエント
意味: 傾斜、勾配

目次に戻る

linear-gradient関数の概要

この関数は直線状のグラデーション画像を生成するために使用します。

グラデーションのタイプは命名どおり、指定した開始色から終了色への直線状、かつ滑らかなグラデーションを表現します。 グラデーションの方向については、ボックスの中心点を通るグラデーションラインの向きで指定することになります。 また、グラデーションラインには終了位置の方向については、角度値やキーワード値を使って指定します。

linear-gradient関数は主に、 background-imageプロパティや backgroundプロパティに使用します。

仕様上は画像を扱える全てのプロパティにグラデーション画像を定義できることになっていますが、 ブラウザによって対応が異なっているので、使用する際には配慮が必要だと思われます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この関数の記述は以下のような書き方になります。

セレクター{
	プロパティ名: linear-gradient(方向と角度またはキーワード, 開始位置のカラーストップ, 終了位置のカラーストップ);
}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

検証に使う要素はdiv要素とします。また使用するプロパティは、 background-image です。 これは、背景の総合プロパティである backgroundプロパティを使って画像を指定することと、何ら変わりません。

グラデーション色の指定: カラーキーワード

このサンプルでは2つのカラーキーワードを使って開始色と終了色を指定してグラデーション画像を作成しています。 redは赤、yellowは黄色のことです。カラーキーワードについては 色見本 (カラーサンプル) のページを参照していただければ幸いです。

div{
	background-image: linear-gradient(red, yellow);
}

目次に戻る

グラデーション色の指定: カラーコード

このサンプルでは3のカラーコードを使って開始色と中間色と終了色を指定してグラデーション画像を作成しています。 この様に色は複数指定することで、より繊細な調整を行うことができます。 カラーコードについては 色見本 (カラーサンプル) のページを参照していただければ幸いです。

div{
	background-image: linear-gradient(#F00, #FF0, #00F);
}

目次に戻る

グラデーションの向き: to キーワード値

キーワード値を使ってグラデーションの進行角度を指定する場合は、「to キーワード値」の記述形式で指定します。 キーワード値は次の4つです。

• top (上)
• bottom (下)
• left (左)
• right (右)

例えば、「to top」を指定した場合は下から「上に向かって」グラデーションが描画され、 「to left」を指定した場合は右から「左に向かって」グラデーションが描画されます。

また、「to bottom right」のように組み合わせて指定した場合は、左上から「右下(斜め方向)に向かって」のグラデーションを指定したことになります。

なお、方向の指定をしなかった場合は、自動的に「to bottom」になります。

div{
	background-image: linear-gradient(to キーワード, #F00, #FF0);
}

目次に戻る

グラデーションの向き: 角度値

方向と角度を指定する時は真上の方向を0度として考えます。 右方向が90度となり、下方向が180度と時計回りに角度を指定することが出来ます。 方向と角度を指定するときの単位はdegです。

div{
	background-image: linear-gradient(角度値deg, #F00, #FF0);
}

目次に戻る

グラデーションの開始点と終了点: パーセンテージ値

グラデーション画像を表現するためには複数の色を指定するわけですが、その色の開始点と終了点を指定することができます。 終了点と前述しましたが、開始点の応用であり、開始点を指定するということは、その色の前に指定している色の終了点を指定することにもなります。

開始点を指定するには色の値の後に半角スペースで区切り、位置を記述します。 位置を指定する場合はパーセンテージ値を使うか、単位付きの数値で指定します。

div{
	background-image: linear-gradient(red 0%, yellow 100%);
}

目次に戻る

グラデーションの中間色点: パーセンテージ値

前項の拡張としてグラデーションの中間色の経由点を見てみたいと思います。 例えば、2色でグラデーションを生成した場合に、1色目の開始点の次に「,」カンマで区切って中間点を指定します。 その次にまた「,」カンマで区切って2色目の開始点を指定するという記述になります。

サンプルを見ていただいた方が分かりやすいかもしれませんが、 中間色点とは1色目と2色目の中間色が、どのポイントにくるかを指定したものということです。

中間色点を指定する場合もパーセンテージ値を使うか、単位付きの数値で指定します。

div{
	background-image: linear-gradient(red 0%, 50%, yellow 100%);
}

目次に戻る

補足説明

• 画像を扱えるプロパティに使用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-image: linear-gradient(red, yellow);

background-image: linear-gradient(red, yellow, blue);

background-image: linear-gradient(to top left, red, yellow);

background-image: linear-gradient(45deg, #F00, #FF0);

background-image: linear-gradient(red 0%, yellow 100%);

background-image: linear-gradient(red 0%, 30%, yellow 100%);

background-image: linear-gradient(red 0%, 70%, yellow 100%);

目次に戻る