CSSで背景にグラデーションをかける方法まとめ(スクロール固定)

アイキャッチ画像

今回はCSSを使ってウェブサイトの背景に美しいグラデーションをかける方法を解説します。以下の2パターンの方法に分けて解説します。

  1. ページの上から下まで全体の背景にグラデーションをかける
  2. 画面に表示される部分の背景にグラデーションをかける(スクロールしても固定)

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

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

全体にグラデーションをかける

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

CSSコード

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

CSS
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%);/*正規の指定*/
} 

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

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

グラデーション

1番上のカラーは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%は「1番上のグラデーションの始まりがgold色」ということを示しています。orange 100%は「1番下のグラデーション終わりが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;/*保険用*/

↑1つめの方法と同じです。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%の色が1番上の開始色、100%の色が1番下の終了色になります。グラデーションの向きを変えたければ、コードを書く順番を入れ替えればOKですね。filter: progid:DX...はIE9対応向けのものでさきほど解説した通りです。

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

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

3. 対応ブラウザ

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

プロパティ IE Chrome Safari FireFox Opera iOS Android
linear-gradientベンダープレフィックス付含む 10〜 4〜 4〜 3.6〜 12.1〜 3.2〜 2.1〜
各バージョンの
リリース年
2012 2010 2010 2009 2011 2010 2009

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

サルワカ