CSSでグラデーションを背景に使う方法：スクロール固定するには？

1. ページ全体に縦のグラデーションをかける方法

この方法のイメージを図にしてみました。

ページ全体（body）にグラデーションをかけるので、縦に長いページだと色の変化が薄まってしまいます。逆に短いページだと、急激に色が変化します。スクロールされることの無い固定されたページ向けかもしれませんね。

CSSコード

グラデーションをかけるためにはlinear-gradientというCSS3のプロパティを使います。以下のコードをコピペして使えば、コンテンツのある部分の上から下までグラデーションがかかるはずです。

body{
	background: orange ;/*保険用*/
	background: -moz-linear-gradient(top, gold 0%, orange 100%);/*古いFireFox向け*/
	background: -webkit-linear-gradient(top, gold 0%,orange 100%);/*古いSafariなど向け*/
	filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='gold',
		endColorstr='orange',
		GradientType=0 );/*IE9以下向け*/
	background: linear-gradient(to bottom, gold 0%, orange 100%);/*正規の指定*/
} 

これをブラウザ表示すると…

以下のようにコンテンツのある部分全体にグラデーションがかかります。

１番上のカラーはgold（色名で指定してます）で、下にかけてorangeへ近づいていきます。※ このgifアニメーションだとカクカクして見えますが、実際の表示はなめからなグラデーションとなっています。

コードの解説

上のコードから解説していきます。

background: orange ;/*保険用*/

↑これは保険用です。仮にlinear-gradientに対応していないものすごく古いブラウザで表示されたときに、この背景色で表示されます。

background: -moz-linear-gradient(top, gold 0%, orange 100%);/*古いFireFox向け*/
background: -webkit-linear-gradient(top, gold 0%,orange 100%);/*古いSafariなど向け*/

↑それぞれ古いブラウザ向けの書き方です。gold 0%は「１番上のグラデーションの始まりがgold色」ということを示しています。orange 100%は「１番下のグラデーション終わりがorange色」ということを示しています。もちろん「#F89174 100%」のようにカラーコードで書いてもOKです。

filter:progid:DXImageTransform.Microsoft.Gradient(
		startColorstr='gold',
		endColorstr='orange',
		GradientType=0 );/*IE9以下向け*/

↑やはり問題となるのはIEです。linear-gradientはIE10〜しか対応していないので、IE9以下向けにこのコードを書きます。とくに書き方を覚える必要はないと思いますが、startColorstr=''がグラデーション開始色、endColorstr=''が終了色になります。GradientTypeは0だと縦、1だと横のグラデーションになります。

background: linear-gradient(to bottom, gold 0%, orange 100%);

↑これが正規の指定です。to bottomは上から下ということを表しています。例えばこれをto rightとすれば左から右にグラデーションがかかります。

2. グラデーションの背景を固定する方法

次に表示される画面内でグラデーションをかけ、スクロールしても固定する方法を紹介します。

2-1. サンプル

たとえばサルワカで以前作った「Typography World」というページでは、スクロールしてもグラデーションが固定されるようになっています。

CSSコード

以下のコードをコピペして貼れば固定のグラデーションがかかります。

html,body {
	height: 100%
}

body:after {/*擬似要素をつくる*/
	position: fixed;/*固定配置*/
	top: 0; left: 0;/*左上に固定*/
	width: 100%; height: 100%;/*画面全体を覆う*/
	content: "";
	background: #f89174;/*保険用*/
    background: -moz-linear-gradient(top, #FFC778 0%,#f89174 100%);/*古いFireFox向け*/
	background: -webkit-linear-gradient(top, #FFC778 0%,#f89174 100%);/*古いSafari・Chrome向け*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbcacb', endColorstr='#f79697',GradientType=0 );/*IE9以下への対応*/
	background: linear-gradient(to bottom, #FFC778 0%, #f89174 100%);/*正規のプロパティ*/
    }

ブラウザで表示すると…

このようにグラデーションが画面の上から下にかかっています。スクロールしても背景のグラデーションは固定されたままです。

解説

body:afterで画面サイズいっぱいの擬似要素を作り、それに対してグラデーションをかけています。

html,body {
	height: 100%
}

↑高さを画面いっぱいのサイズにしています。

body:after {/*擬似要素をつくる*/
	position: fixed;/*固定配置*/
	top: 0; left: 0;/*左上に固定*/
	width: 100%; height: 100%;/*画面全体を覆う*/
	content: "";
	z-index: -1;/*背景にするため*/

body:after（擬似要素）で画面全体を覆うカバーのようなものを作り、それに対してグラデーションをかけています。

background: #f89174;/*保険用*/

↑１つめの方法と同じです。linear-gradientに対応していないブラウザではこの色が単色で背景に表示されます。

background: -webkit-linear-gradient(top, #FFC778 0%,#f89174 100%);/*古いSafari・Chrome向け*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbcacb', endColorstr='#f79697',GradientType=0 );/*IE9以下への対応*/
	background: linear-gradient(to bottom, #FFC778 0%, #f89174 100%);/*正規のプロパティ*/

↑古いブラウザに対応するために複数のコードを書いています。どれも上から下にグラデーションをかけるという意味になります。0%の色が１番上の開始色、100%の色が１番下の終了色になります。グラデーションの向きを変えたければ、コードを書く順番を入れ替えればOKですね。filter: progid:DX...はIE9対応向けのものでさきほど解説した通りです。

なぜわざわざ疑似要素を作るの？⇒iPhone対応のため

html,body{height:100%}として、body:afterを使わず直接bodyにグラデーションをかけてもほとんどのブラウザで同じ表示になります。ただし、この方法だとiPhoneでグラデーション背景が固定されないのです…。iPhoneを無視するわけにはいかないので現状上で紹介した書き方がベストでしょう。

3. 対応ブラウザ

上で紹介したCSSコードに対応しているのは、以下のバージョンのブラウザになります。

対応しているブラウザの最も古いバージョンがリリースされた年も書いておきました。こう見ると、ほぼどのブラウザでも問題なく表示されそうです。IE10以下についても、filter:progid...のコードによりIE5.5〜9まで対応できます。というわけで問題なく使えますね。