トップページ  > CSS3  > linear-gradient()

★CSS3リファレンス

linear-gradient() …… 線形グラデーションを指定する
Internet Explorer Google Chrome Safari Firefox Opera
広告

linear-gradient()関数は、線形グラデーションを指定する際に使用します。

■構文

linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色);

■値

グラデーションの角度、または、方向
数値にdegなどの単位を付けてグラデーションラインの角度を指定、 または、to に続けて left, rightや、top, bottom などの位置を表すキーワードでグラデーションラインの方向を指定。 初期値は、180deg(to bottom)
開始色, 途中色, 終了色
開始色, 途中色, 終了色を指定。 必要に応じて各色の開始位置を半角スペース区切りで指定することもできます。 例えば、red, yellow, skyblue と指定すれば均一に変化するグラデーションとなりますが、red 50px, yellow 70px, skyblue 100px などと指定すれば各色がどの位置から始まるかを指定できます。

グラデーションの角度は、degなどの単位を付けた角度値で指定します。 また、グラデーションの開始色と終了色は、カンマ( , )区切りで指定します。

■角度値で指定した使用例

CSSソース

<div style="width:150px; margin:2px; background: linear-gradient(white, navy);">角度を省略</div>
<div style="width:150px; margin:2px; background: linear-gradient(0deg, white, navy);">0deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(90deg, white, navy);">90deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(180deg, white, navy);">180deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(270deg, white, navy);">270deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(45deg, white, navy);">45deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(225deg, white, navy);">225deg</div>
↓↓↓

ブラウザ上の表示

角度を省略
0deg
90deg
180deg
270deg
45deg
225deg

角度値の代わりに、left, right や、top, bottomなどの位置を表すキーワードを使用してグラデ―ショーンの方向を指定することもできます。 以下のように toに続けて位置を表すキーワードを記述します。

0deg は to top 、 90deg は to right 、 180deg は to bottom 、 270deg は to left にそれぞれ置き換えることができます。 グラデーションの角度(方向)の初期値は、180deg(to bottom)です。

■位置を表すキーワードで指定した使用例

CSSソース

<div style="width:150px; margin:2px; background: linear-gradient(white, navy);">方向を省略</div>
<div style="width:150px; margin:2px; background: linear-gradient(to top, white, navy);">to top</div>
<div style="width:150px; margin:2px; background: linear-gradient(to left, white, navy);">to left</div>
<div style="width:150px; margin:2px; background: linear-gradient(to bottom, white, navy);">to bottom</div>
<div style="width:150px; margin:2px; background: linear-gradient(to right, white, navy);">to right</div>
<div style="width:150px; margin:2px; background: linear-gradient(to top right, white, navy);">to top right</div>
<div style="width:150px; margin:2px; background: linear-gradient(to bottom left, white, navy);">to bottom left</div>
↓↓↓

ブラウザ上の表示

方向を省略
to top
to right
to bottom
to left
to top right
to bottom left

グラデーションの開始色と終了色はカンマ( , )区切りで指定しますが、さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。

■途中色を追加した使用例

CSSソース

<div style="width:150px; margin:2px; background: linear-gradient(white, aqua, blue, navy);">角度を省略</div>
<div style="width:150px; margin:2px; background: linear-gradient(0deg, white, aqua, blue, navy);">0deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(90deg, white, aqua, blue, navy);">90deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(180deg, white, aqua, blue, navy);">180deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(270deg, white, aqua, blue, navy);">270deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(45deg, white, aqua, blue, navy);">45deg</div>
<div style="width:150px; margin:2px; background: linear-gradient(225deg, white, aqua, blue, navy);">225deg</div>
↓↓↓

ブラウザ上の表示

角度を省略
0deg
90deg
180deg
270deg
45deg
225deg

線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。

to top rightの場合のグラデーションライン

グラデーションラインの角度によっては開始位置と終了位置がボックスの外側に配置される場合がありますが、ボックスのコーナーは開始色と終了色の純色となります。

45degの場合のグラデーションライン

linear-gradient()関数は、 background-imageプロパティや list-style-imageプロパティなど、 画像を扱うことのできるプロパティの値として指定できます。 以下の使用例では、 backgroundプロパティの値にlinear-gradient()関数を使用しています。

以下は、linear-gradient()関数の様々な使用例です。

■使用例

CSSソースは外部ファイル(sample.css)に記述

p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:100px;
}
p.sample1 {
background: linear-gradient(white, gray);
}
p.sample2 {
background: linear-gradient(90deg, #ff0000, rgba(255,0,0,0));
}
p.sample3 {
background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet);
}
p.sample4 {
background: linear-gradient(135deg, red 50px, yellow 70px, skyblue 100px);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">線形グラデーション1</p>
<p class="sample2">線形グラデーション2</p>
<p class="sample3">線形グラデーション3</p>
<p class="sample4">線形グラデーション4</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

線形グラデーション1

線形グラデーション2

線形グラデーション3

線形グラデーション4

以下のベンダープレフィックス付きの使用例は、草案時点の旧い記述形式によるものです。

linear-gradient()関数は、草案と標準ではグラデーションのデフォルトの開始位置が変更されています。 そのため、上記の標準使用例と同様の表示を実現するために、以下のベンダープレフィックス付きソースでは指定する角度値が異なっている点に注意してください。

例えば、 標準で 90deg と指定したものはベンダープレフィックス付きでは 0deg に、標準で 135deg と指定したものはベンダープレフィックス付きでは 315deg に変更しています。

■ベンダープレフィックスを付けた場合の使用例

CSSソースは外部ファイル(sample.css)に記述

p.prefix_sample1, p.prefix_sample2, p.prefix_sample3, p.prefix_sample4 {
width:300px; height:100px;
}
p.prefix_sample1 {
background: -moz-linear-gradient(white, gray);
background: -webkit-linear-gradient(white, gray);
background: -ms-linear-gradient(white, gray);
}
p.prefix_sample2 {
background: -moz-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
background: -webkit-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
background: -ms-linear-gradient(0deg, #ff0000, rgba(255,0,0,0));
}
p.prefix_sample3 {
background: -moz-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
background: -ms-linear-gradient(315deg, red, orange, yellow, green, blue, indigo, violet);
}
p.prefix_sample4 {
background: -moz-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
background: -webkit-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
background: -ms-linear-gradient(315deg, red 50px, yellow 70px, skyblue 100px);
}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="prefix_sample1">線形グラデーション1</p>
<p class="prefix_sample2">線形グラデーション2</p>
<p class="prefix_sample3">線形グラデーション3</p>
<p class="prefix_sample4">線形グラデーション4</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

線形グラデーション1

線形グラデーション2

線形グラデーション3

線形グラデーション4

■関連項目

linear-gradient()関数 …… 線形グラデーションを指定する
radial-gradient()関数 …… 円形グラデーションを指定する
repeating-linear-gradient()関数 …… 繰り返しの線形グラデーションを指定する
repeating-radial-gradient()関数 …… 繰り返しの円形グラデーションを指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ