CSSでグラデーション

CSSでグラデーション

まずは前回記事のCSS小技集をピックアップしておきたいと思います。
角丸ラインと組み合わせると便利に使える気がします。

• CSS小技集！覚えておくこと必須級のコーディング集（スマホ端末対応編）
• CSS小技集！覚えておくこと必須級のコーディング集（PCブラウザ対応編）

前回までの記事と今回の記事、あまり脈略のないお話ではありますが、CSS繋がりということで慣れのない方は全部見て頂ければと思います。

CSSでグラデーションをする時、最も使われることが多いと言っても過言ではないパターンが、このパターンになるのではないでしょうか。

<div id="gra_01">
最も使われることが多いパターンのグラデーション
</div>

#gra_01 {
	display: inline-block;
	margin: 0 auto;
	padding: 10px 20px;
	background: -ms-linear-gradient(top, #DF3A01, #8A2908);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=0)";
	background: -moz-linear-gradient(top, #DF3A01, #8A2908);
	background: -webkit-gradient(linear, center top, center bottom, from(#DF3A01), to(#8A2908));
}

それでは、上記の解説をしてみたいと思います。

まず、IEでグラデーションを表示するために必要な記述が以下の行です。
特に2行目はIE9で表示するために必要な記述です。
IE8以前は表示出来るようですが、正確に確認していません・・・古いブラウザに合わせると全体の仕様も考慮しなければいけないため、IE8は考慮していません。

	/** IE10以降 **/
	background: -ms-linear-gradient(top, #DF3A01, #8A2908);
	/** IE9 **/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=0)";

以下の内容で、FirefoxやGoogle chromeやsafariで表示させるために必要な記述です。

	/** Firefox向け **/
	background: -moz-linear-gradient(top, #DF3A01, #8A2908);
	/** Google chrome、safari向け **/
	background: -webkit-gradient(linear, center top, center bottom, from(#DF3A01), to(#8A2908));

グラデーション効果を細かくします。
虹色みたいな感じにすると見難いかもしれませんが、応用を知っておきましょう。

<div id="gra_02">
縦 : 細かい指定をするグラデーション
</div>

#gra_02 {
	display: inline-block;
	margin: 0 auto;
	padding: 10px 40px;
	/** 1% 〜 100% でカラーを変える位置を指定 **/
	background: -ms-linear-gradient(top, #DF3A01, #FE642E 30%, #FF8000 50%, #D7DF01 70%, #8A2908);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=0)";
	/** 1% 〜 100% でカラーを変える位置を指定 **/
	background: -moz-linear-gradient(top, #DF3A01, #FE642E 30%, #FF8000 50%, #D7DF01 70%, #8A2908);
	/** 0.1 〜 1.0 でカラーを変える位置を指定 **/
	background: -webkit-gradient(linear, center top, center bottom, from(#DF3A01), color-stop(0.3, #FE642E), color-stop(0.5, #FF8000), color-stop(0.7, #D7DF01), to(#8A2908));
}

それぞれ、コメントアウトでメモしていますが、カラーを変える位置を指定して複数のカラーをグラデーションすることもできます。

グラデーションは縦だけではなく横方向にも入れることができます。

<div id="gra_03">
縦 : 細かい指定をするグラデーション
</div>

.sample_area_disc {
	text-align: center;
}

#gra_03 {
	display: inline-block;
	margin: 0 auto;
	padding: 10px 40px;
	/** 1% 〜 100% でカラーを変える位置を指定 **/
	background: -ms-linear-gradient(left, #DF3A01, #FE642E 30%, #FF8000 50%, #D7DF01 70%, #8A2908);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#DF3A01', endColorstr='#8A2908', GradientType=1)";
	/** 1% 〜 100% でカラーを変える位置を指定 **/
	background: -moz-linear-gradient(left, #DF3A01, #FE642E 30%, #FF8000 50%, #D7DF01 70%, #8A2908);
	/** 0.1 〜 1.0 でカラーを変える位置を指定 **/
	background: -webkit-gradient(linear, left center, right center, from(#DF3A01), color-stop(0.3, #FE642E), color-stop(0.5, #FF8000), color-stop(0.7, #D7DF01), to(#8A2908));
}

本項では上から下にグラデーション、左から右にグラデーションという形式で記述致しました。
他にも左斜め上から右斜め下へグラデーションや円形グラデーションなどの設定も可能です。
円形のグラデーションについては記述内容が若干変化するため、別の機会を設けて解説したいと思います。

斜め上や斜め下の設定について言えば、Firefox、Google chromeなどはleftやtopという値を変えれば済むところですが、IEだけはそうはいきません。
IEはそもそもの仕様にしてもかなり曖昧なことが多いため、ここでは正確な記述を記載するのは控えておきたいと思います。

ただ、本家サイトではこのCSS3のグラデーションについて丁寧に解説されていますので、IEに対応する場合は本家情報を見て適宜対応頂くのがベストだと思います。

• IE10のプレフィックスのないCSS3グラデーション

ということで、円形のグラデーションについては改めて・・・ということで、ひとまずのグラデーションに関する基本的な解説は以上です。

これらのグラデーションだけではなく、border-radiusも同じですが、IEの対応範囲が非常に難しいところです。
ですので、IE9以降での表示確認だけは必ず入れておきたいところですね。

大きなコンテンツ表示の際にCSSでグラデーションにするとちょっとしたブラウザバグが大きく見えてしまうので、実のところあまり実用的ではないのかもしれません。
ただ、今後はもっとブラウザは進化するでしょうし、CSSで絵を書いてしまう方もいらっしゃるようですので、今からでも見ておくべきところだと考えてたりします。

私はまだボタンの背景くらいでしかグラデーションを使ったことがないんですが、そのうちどこかで大きな絵を書く時にでも使ってみたいと思う今日この頃です。

執筆 : 清水 隼斗

CSSでグラデーションのAMPページ