HOME > コラム > CSS Chips > CSSでグラデーション

CSSでグラデーション

コラム

前回までの記事でCSSの小技を紹介致しました。
ということで、その勢いでCSSでグラデーションを実装する記述を紹介したいと思います。
基本的に古いブラウザ(IE8以前)でなければ普通に表示してくれるため、ちょっとした装飾で使っても何ら問題ないと思います。
ボタンの背景グラデーションで最も使われているのではないでしょうか。
それでは、進めていきたいと思います。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

CSSでグラデーション

CSSでグラデーションイメージ
前回までのCSS小技集

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

前回までの記事と今回の記事、あまり脈略のないお話ではありますが、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に対応する場合は本家情報を見て適宜対応頂くのがベストだと思います。

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

締め

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

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

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

執筆 : 清水 隼斗

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

Facebookコメント

株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP