HTML STUDY
>
>

CSSでグラデーションをつける

ここではCSSでグラデーションをつける方法を解説していきます。主な項目は以下の５つになります。

CSS3からbackground-imageの値に設定できるようになったlinear-gradientは、グラデーションの開始と終了を指定して様々な背景を作ることができます。また、グラデーションを指定する場合は、Safariのためにベンダープレフィックスをつける必要があります。(-webkit-linear-gradient)

グラデーションをつける

では、ここからCSSプロパティbackground-imageの値、linear-gradientを使って200×200pxのボックスを使って、いろいろなグラデーションを表示してみましょう。

値の入力の仕方は以下のような形になります。開始と終了の色を#から始まるカラーコードや、redやblueなどのキーワードで設定することもできます。

例 background-image: linear-gradient(開始の色,終了の色);
CSSプロパティ解説
background-image背景を設定する
background-imageの値解説
linear-gradient( , )グラデーション（カッコに開始色と終了色を設定）

HTMLコード記述例

<div class="test1">
<p>テスト１</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.test1 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red,blue);
 background-image: linear-gradient(red,blue);
 color: #ffffff;
}

ブラウザ表示例

テスト１

3色のグラデーションをつける

では次に赤と青の間に黄色を入れてグラデーションを3色にしてみましょう。値の順番をred,yellow,blueと３つ指定します。

HTMLコード記述例

<div class="test2">
<p>テスト２</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.test2 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red,yellow,blue);
 background-image: linear-gradient(red,yellow,blue);
 color: #ffffff;
}

ブラウザ表示例

テスト２

グラデーションの開始位置を指定する

何も設定しなければグラデーションは2色の場合50%,50%に分かれます。カラーコードの後に%を指定することで、グラデーションの開始を設定することができます。

HTMLコード記述例

<div class="test3">
<p>テスト３</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.test3 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image: -webkit-linear-gradient(red 80%, blue);
 background-image: linear-gradient(red 80%, blue);
 color: #ffffff;
}

ブラウザ表示例

テスト３

グラデーションの方向を設定する

カラー指定の前にグラデーションの方向を設定することができます。

左から右の場合[to right]
左上から右下の場合[to bottom right]

と入力します。ただし、Safari用の指定では開始位置を入力するので注意が必要です。(例：left top)

HTMLコード記述例

<div class="test4">
<p>テスト４</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.test4 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image:
  -webkit-linear-gradient(left top,red,blue);
 background-image:
  linear-gradient(to bottom right,red,blue);
 color: #ffffff;
}

ブラウザ表示例

テスト４

グラデーションの方向の代わりに角度を指定することもできます、単位に[deg]つけて値を入力します。例：(45deg,red,blue)

中心からグラデーションをつける

最後に中心から外側にむけてのグラデーションの設定方法です。

background-imageの値にradial-gradientを指定します。

HTMLコード記述例

<div class="test5">
<p>テスト５</p>
</div>

外部ファイルCSS記述例

@charset "utf-8";

div.test5 {
 width: 200px;
 height: 200px;
 border: solid 1px #cccccc;
 background-image:
  -webkit-radial-gradient(red,blue);
 background-image:
  radial-gradient(red,blue);
 color: #ffffff;
}

ブラウザ表示例

テスト５

ボックスの形が長方形の場合中心からのグラデーションは楕円の形になります。色の指定の前に[circle]を入力すると長方形のボックスでも、正円のグラデーションに設定することができます[例：(circle,red,blue)]

CSSボックス 関連記事