スマートフォン最適化ノウハウコラム

CSS3で知っておきたい基礎知識「グラデーション」の徹底解説!


ページ内目次

  1. CSS3でのグラデーションについて
  2. 書式
  3. サンプル
  4. 綺麗なグラデーションを作るちょいテク

CSS3でのグラデーションについて

グラデーションの書式はブラウザごとに異なるため、クロスブラウザ対応の際にはそれぞれの書式で記述する必要があります。
しかし、今後のアップデートで書式が統一される見通しのようです。
ここではWebkit系(Safari, Chrome)とGecko系(Firefox)をサンプルとして話しを進めたいと思います。

書式

グラデーションの書式はグラデーションの種類・グラデーションの方向・色・色の領域から構成されます。
まずは実際の書式を見てみましょう。

書式サンプル

.gradation1 {
	background-image: -moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600);
	background-image: -webkit-gradient(
		linear,
		left top,left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600));
}

.gradation1s {
	background-image: -moz-グラデーションの種類-gradient(
		グラデーションの方向,
		色 領域(%指定),
		色 領域(%指定),
		色 領域(%指定),
		色);
	background-image: -webkit-gradient(
		グラデーションの種類,
		グラデーションの開始位置, 終了位置,
		from(開始色),
		color-stop(領域(0~1小数点), 色),
		color-stop(領域(0~1小数点), 色),
		to(終了色));
}

このような感じでなんとなく分かりますが、もう少し詳しく見て行きましょう。

グラデーションの種類

線形のグラデーションは「linear」、円形のグラデーションは「radial」と指定します。

.gradation2 {
	/* 線形 */
	background-image: -moz-linear-gradient();
	background-image: -webkit-gradient(linear);

	/* 円形 */
	background-image: -moz-radial-gradient();
	background-image: -webkit-gradient(radial);
}

※Firefoxは()の中に記述するのではなく「-moz-linear」「-moz-radial」と()の外に指定します。

グラデーションの方向

Firefoxでは「top」だけで上から下へのグラデーションになります。
Webkit系では「left top, left bottom」で上から下へのグラデーションになります。

また、斜めの線形グラデーションを作成したい場合はFirefoxでは角度(left -45deg)の指定をし、Webkit系では開始位置と終了位置(left top, right bottom)という形で指定します。

.gradation3 {
	/* 上から下 */
	background-image: -moz-linear-gradient(top);
	background-image: -webkit-gradient(linear, left top, left bottom);

	/* 下から上 */
	background-image: -moz-linear-gradient(bottom);
	background-image: -webkit-gradient(linear, left bottom, left top);

	/* 左から右 */
	background-image: -moz-linear-gradient(left);
	background-image: -webkit-gradient(linear, left top, right bottom);

	/* 右から左 */
	background-image: -moz-linear-gradient(right);
	background-image: -webkit-gradient(linear, right top, left bottom);

	/* 左上から右下 */
	background-image: -moz-linear-gradient(top -45deg);
	background-image: -webkit-gradient(linear, left top, right bottom);
}

色と色の領域

色の指定は16進数カラーコードとアルファ値も指定できるRGBaでの2パターンの方法を選べます。

.gradation4 {
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(255,255,255,0)));
}

.gradation4b {
	background-image: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#ffffff));
}

Firefoxは開始位置を指定出来るため、ゼロ位置から開始する場合には0%と指定します。最後の100%は省略可能です。
Webkit系は「form」と「to」で最初の色、最後の色を指定します。

3色以上のグラデーションの作成

Firefoxでは色と領域の指定をカンマ(,)区切りで指定するだけで3色以上のグラデーションを作成出来ます。
Webkit系では「color-stop」を追加しますが、このとき「from」の後ろにカンマ(,)区切りで「color-stop(領域, 色)」を追加していき「to」で閉じる形で記述することで見た目にもわかりやすい書式になります。

.gradation5 {
	background-image: -moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600);
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600));
}

背景色・画像を一緒に指定するショートハンド

ショートハンドでグラデーション・背景色・画像・各種設定の指定も可能です。

.gradation6 {
	/* グラデーションを全面に出し背景色や画像を背面にする場合 */
	background:
		-moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600), #fff url() no-repeat;
	background: url() no-repeat,
		-webkit-gradient(
		linear, left top, left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600)), #fff url() no-repeat;

	/* 背景色や画像を全面出し、グラデーションを背面にする場合 */
	background:  #fff url() no-repeat,
		-moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600);
	background: url() no-repeat,
		-webkit-gradient(
		linear, left top, left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600));

	/* グラデーションを中心に画像を前面に、背景色を背面にする場合 */
	background: url() no-repeat,
		-moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600), #fff;
	background: url() no-repeat,
		-webkit-gradient(
		linear, left top, left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600)), #fff;
}

サンプル

線形グラデーション(2色)

線形グラデーション(2色)

.sample1_454 {
	height: 200px;
	background-image: -moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600);
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffcc00),
		to(#ff6600));
}

線形グラデーション(2色・斜め)

線形グラデーション(2色・斜め)

.sample2_454 {
	height: 200px;
	background-image: -moz-linear-gradient(
		top -45deg,
		#ffcc00 0%,
		#ff6600);
	background-image: -webkit-gradient(
		linear, left top, right bottom,
		from(#ffcc00),
		to(#ff6600));
}

線形グラデーション(3色以上)

線形グラデーション(3色以上)

.sample3_454 {
	height: 200px;
	background-image: -moz-linear-gradient(
		top,
		#ffcc00 0%,
		#ff6600 49%,
		#ff3300 50%,
		#ff6600);
	background-image: -webkit-gradient(
		linear,
		left top,left bottom,
		from(#ffcc00),
		color-stop(0.49, #ff6600),
		color-stop(0.50, #ff3300),
		to(#ff6600));
}

綺麗なグラデーションを作るちょいテク

「綺麗な」というと少々語弊がありますが、例えば白→灰のグラデーションを作成すると、下記サンプルのように白の領域が狭く均等にグラデーションされてないような見栄えになります。

通常の例

白い領域が狭く見えます。

.sample4_454 {
	height: 200px;
	background: -moz-linear-gradient(
		top,
		rgba(255,255,255,1) 0%,
		rgba(200,200,200,1));
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(rgba(255,255,255,1)),
		to(rgba(200,200,200,1)));
	border: 1px solid #ccc;
}

そこで背景色と透過を上手く使うことにより下記サンプルのように白と灰の領域が均等なグラデーションを作成することが出来ます。

ちょいテクを使った例

白い領域と灰色の領域がちょうど半々になり綺麗にグラデーションされています。

.sample5_454 {
	height: 200px;
	background: -moz-linear-gradient(
		top,
		rgba(255,255,255,0) 0%,
		rgba(0,0,0,0.25)), #fff;
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(rgba(255,255,255,0)),
		to(rgba(0,0,0,0.25))), #fff;
	border: 1px solid #ccc;
}

薄い色(今回の場合は白)の開始色をアルファ値で完全透過にし、その代わりに背景色を白にしつつ灰色も黒透過25%にしてる部分がポイントです。
また、もう一つのメリットとして透過させていることにより、背景色を変更するだけで淡い色から濃い色へのグラデーションを簡単に作成出来ます。

※一部のAndroid機種では透過を使ったグラデーションでムラが出来ます。

▼css3を利用したボタンのサンプルはこちらから

5つの効果で作る、よく使うCSS3ボタンデザインサンプル集


  • カテゴリ/スマートフォンコーディング
  • ↑このページの上部へ