[13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)

最終更新日:2017年10月15日  (初回投稿日:2011年05月02日)

前回の [13-2] サイトの背景に画像を表示しよう(CSS使用)で「サイト背景のグラデーションを画像で作る方法」を紹介しましたが、CSSで簡単に線形グラデーションを指定できます。
画像ではできない「斜め方向のグラデーション」も簡単です。

使用する要素 <body> 〜 </body>
使用する
CSSプロパティ
background

「円形(放射状)グラデーション」はコチラにまとめています。
[18-4] CSSで円形(放射)グラデーションを作ろう (radial-gradient)
今回の記事は、CSSの「線形グラデーション(linear-gradient)」についてです。

2017年09月:サンプルファイルを全て作り直し、それに伴い本文も書き換えました。
また、IE8、IE9 への対応部分は削除しました。

2015年02月:この記事には ベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、不要と判断し記事から削除しました。
ただしオールドブラウザ対策として 「ベンダープレフィックス」付きの古い構文を下部にまとめて残しました。(2015年2月追記)

2013年11月:初回投稿時(2011年)から、linear-gradient の構文が変更されているため、ページは全面変更しました。サンプルファイル(sample18set)も修正しています。

グラデーションの角度などによるバリエーション

線形グラデーションの角度などを変えて、今回作ってみたサンプルは3つです。

線形グラデーション指定の構造

このボックスは「上から下へ、白から黒へ」の線形グラデーションを指定しています。

sample

CSS は下記のようになっています。
これが一番シンプルな指定。
グラデーションの「角度」や「開始位置」などがデフォルトなので略しているんです。指定しているのは「開始色」と「終了色」だけですね

background: linear-gradient(white, black);

グラデーション指定の構文の基本は、このようになっています。

  • 「角度(または「to 方向」)」を指定した後「,(カンマ)」で区切り、色指定が続きます。
  • 「角度(または「to 方向」)」のデフォルトは「上から下」。デフォルト値は省略できます。
    (180deg や to bottom は書かなくてOK。ちゃんと上から下になるってこと)
  • 角度は「deg」という単位を使います。デフォルトは「180deg」
    下から上(時計の12時の方向)が 0。そこから時計右回りで示します。3時の方向なら90deg。
  • 方向のキーワードは、to と「left」「right」「top」「bottom」を組み合わせて使います。
    デフォルトは「to bottom」
    • to right(右へ)(逆方向は to left)
    • to bottom(下へ = これはデフォルトなので省略OK)(逆方向は to top)
    • to right bottom(右斜め下へ)(逆方向は to left top)
    • to left bottom(ひだり斜め下へ)(逆方向は to right top)
  • 開始色, 終了色 は最低限必要です。色指定はCSSと同じ。色の切り替えは後述。
    開始色の始まりの位置は、角度(または方向)の「開始点」がデフォルト。
    終了色の終わりの位置は、角度(または方向)の「終了点」がデフォルト。

縦方向にグラデーションを指定

では、サイト背景に 縦方向(y軸方向)に線形グラデーションを指定してみましょう。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

( HTML や CSS のコードは サンプルファイル内に書いてあります)

要素にCSSでグラデーションの背景を指定します。

body {
	width:100%;
	margin:0;
	padding:0;
	color:#666;
	font-family:Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	line-height:1.6em;
	/*背景の指定*/
	background:#ddefbb; /*←グラデーション未対応のブラウザ用*/
	background:-webkit-linear-gradient(top, #ddefbb, #fee) #ddefbb; /*←オールドブラウザ用*/
	background:linear-gradient(#ddefbb, #fee) #ddefbb; /*←標準型*/
	}

古いブラウザのために3つ書いてます

背景(background)の指定が3つありますね(9〜11行)。
これは上から、
・グラデーション未対応のブラウザ(背景色のみ)9行目
・オールドブラウザ(構文が古くて、ベンダープレフィックス付き)10行目
・標準型

になってます。
かなり古いブラウザは、CSSのグラデーションが理解できないので、背景がデフォルト色になっちゃいます。理解できる指定が入っていればそれを実行する(理解できない後の指定は無視する)ので、この順に書きます。
これは、「IE 9」「Android 4」「Safari 6」のシェアが無くなれば、標準型のみでOK。

ベンダープレフィックス付きの古い構文の書き方は、
この記事後半の「ベンダープレフィックス」付きの古い構文 にまとめています。

ショートハンドという書き方です

前回も書きましたが、
backgroundは「ショートハンドプロパティ」と呼ばれる 複数のプロパティの値をまとめて記述するためのプロパティです。
background: linear-gradient(#ddefbb, #fee) #ddefbb という書き方は「ショートハンド」と言います。

ショートハンドにする前の書き方は、以下のようになっています。

background-image: linear-gradient(#ddefbb, #fee); /*背景イメージ*/
background-color: #ddefbb;             /*背景の色*/

「グラデーション」は、CSSでは「固有のサイズを持たない画像」として扱われるのだそうです。(参考:gradient - CSS | MDN
なので background-imageプロパティ で指定するんですね。

で、最後に背景色(background-color)を書いていますが、これはまあ「念のため」。
何か不都合があって、グラデーションが背景全面に表示されないような場合に、一応背景色を入れておく措置です。無くても構いません。

background-image や backgroundのショートハンドについては、こちらに詳細を書いていますのでご覧ください。
●background-image【15-1】background関連のプロパティ(1/4)
●backgroundのショートハンド【15-5】backgroundのショートハンド まとめ

横方向のグラデーションも簡単

横方向のグラデーションなら、方向を「to right(または to left)」と書き加えるだけです。

左から右へ、上のサンプルと同じ色のグラデーションを指定するとこんなかんじ。

sample
background:-webkit-linear-gradient(left, #ddefbb, #fee) #ddefbb;  /*←オールドブラウザ用*/
background: linear-gradient(to right, #ddefbb, #fee);  /*←標準型*/

オールドブラウザ用は、方向が「left」となってて、標準型と書き方が逆ですね。
この記事後半の「ベンダープレフィックス」付きの古い構文 に書き方をまとめていますのでご覧ください。

斜め方向にグラデを指定 & 途中で色を切り替えよう

では次は、斜め方向のグラデーションを指定してみます。
グラデーションの途中で色を切り替える方法も紹介します。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

このサンプルは左上から右下への斜め方向グラデーションです。
方向を「to bottom right」と指定しています(11行目の標準型)

body {
	width:100%;
	margin:0;
	padding:0;
	color:#666;
	font-family:Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	line-height:1.6em;
	/*背景の指定*/
	background:#3cc; /*←グラデーション未対応のブラウザ用*/
	background:-webkit-linear-gradient(left top, #fcc, #cf6 20%, #3cc 40%, #006 70%) #3cc; /*←オールドブラウザ用*/
	background:linear-gradient(to bottom right, #fcc, #cf6 20%, #3cc 40%, #006 70%) #3cc; /*←標準型*/
	}

また、このサンプルは 途中で色を変えています。
「色指定」の後に半角スペース空きで「切替え位置」を指定。それがワンセットで、何度でも切替え可能です。

サンプルでの色の切り替え位置を、下図にまとめてみました。

最終色は70%のところから始めています(別に100%の位置じゃなくてもイイんです)
位置指定を省略すれば、終了点(100%の位置)がその色になります。

開始色の開始位置は「0」がデフォルトなので、省略してOK
開始位置を「0以外」にしたければ、値を指定します。

%でなく ピクセル(px)単位で指定してもOK。(「#fcc 50px」とか)

グラデーションに透明度も指定する

グラデーションに透明度(アルファ値)も指定してみましょう。
今回は<header>要素にグラデーションと透明度を指定します。

(画像クリックで、実際のファイルが 別ウィンドウで開きます)

<body>には画像のタイリングをしています。その上に乗っかる<header>のグラデーションに透明度を指定して<body>の背景が透けるようにしています。

CSSはこちら

header {
	display:block;
	padding:30px;
	color:white;
	/*headerの背景の指定*/
	background:#290cac; /*←グラデーション未対応のブラウザ用*/
	background:-webkit-linear-gradient(left, rgba(0,153,255,0.5), rgba(41,12,172,0.7)); /*←オールドブラウザ用*/
	background:linear-gradient(to right, rgba(0,153,255,0.5), rgba(41,12,172,0.7)); /*←標準型*/
	}

透明度を指定するために rgba() を使っています。

rgb() 色の10進数による指定です。
RGBとは、R(レッド)G(グリーン)B(ブルー)の光の三原色のこと。この各色を0〜255の数値で表します。
RGB三色とも0( rgb(0,0,0) )だと黒、3色とも255( rgb(255,255,255) )だと白です。

rgba() という指定方法は、色の10進数による指定 透明度(alpha) も追加したもの。
アルファは 0 が透明、1 が不透明。0.5 だとちょうど中間の透明度になります。

上記のCSSだと、
開始色はブルーの透明度 0.5( rgba(0,153,255,0.5) )、終了色はちょっと赤っぽいブルーの透明度 0.7 ( rgba(41,12,172,0.7) )です。

「色指定」に関しての詳細はこちらを参考にしてください。
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)

16進数から rgba() への変換

サンプルで使ってるブルー( rgb(0,153,255) )は、16進数だと「#09f」です。
この 16進数から rgb() への変換を簡単にできるサイトがあります。

HSL Color Picker - by Brandon Mathis

こちらはスライダーで色を作れて、表示される値をコピペで使えてめちゃ便利。

キレイなグラデーションがチョイスできるサイト

グラデーション専用のカラーパレットサイトです。
uiGradients - Beautiful coloured gradients

ロードするとランダムにグラデーションが表示されます。
画面の左右にある「<」「>」でグラデーションを切り替えます。
「Show all gradients」をクリックすると一覧を表示できます。

「Rotate gradient」で回転(斜めもできる)させたり、「Get CSS」で CSSのコードをコピペできます。

このサイトで CSSコードをコピーして、先ほどの HSL Color Picker で色や透明度を調整すれば、時短だし、Phoroshopなどのソフトウエアも不要です。

「ベンダープレフィックス」付きの古い構文

ほとんどのブラウザは「標準型」の構文でOKです。
が、まだ今の「標準型」が無かった頃の 1つ前の構文で、しかも「ベンダープレフィックス」付きで対応していたブラウザバージョンがあります。

「標準型」の構文は、Android(webkit系)では4.4(2013年10月リリース)からの対応で、それ以前のバージョン(4.3以前)は「ベンダープレフィックス」付きの古い構文にしか対応していません。
また、Safariも 6.1 から( iOS Safari は 7 から)「標準型」に対応で、それ以前のバージョンは「ベンダープレフィックス」付きの古い構文に対応しています

これらのブラウザのシェアは非常に少ないですが、一応古い構文も書いてくほうが無難です。

webkit系の古い linear-gradient の指定は「方向」の部分が標準型と違うだけ。
下記のように、開始点を指定して暗示的に方向を示します

  • top(上から下へ)(逆方向は bottom)
  • left(左から右)(逆方向は right)
  • left top(左上から右斜め下へ)(逆方向は right bottom)
  • right top(右上から左斜め下へ)(逆方向は left bottom)

deg による角度の指定は不可。これはあきらめよう。

ベンダープレフィックス付き構文を先に書き、標準型は最後に書くのが鉄則です。

background: -webkit-linear-gradient(left, white, black);
background: linear-gradient(to right, white, black);

IE9以下はグラデーションに未対応

IE9以下はグラデーションに未対応です。
IE9 は 2017年4月にサポートが終了したので、もうほぼシェアは無いと思われますが、念のためグラデーションを背景に使うときは、グラデ以外に背景色を指定しておこう。

特に「暗い色のグラデーションに白文字」の場合、グラデーションがないと文字が読めないなんてこともあるので、暗い単色を背景に入れておきましょう。

次回予告

次回は、ブラウザで「ソースコードを読む」方法を紹介。
どんなブラウザでも簡単に、閲覧中のウェブサイトのソースコードが見られるようになっています。
他の人が作った HTMLやCSSなどを見るのは、とても勉強になります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

わかりやすくてありがたいです。

Re: No title

たらこさん
コメントありがとうございます。お役に立てて何よりです。

No title

大変、参考になります。

いままで使用した参考書(大体2000円くらいの)よりも

詳しく、丁寧に解説されているので、理解しやすいです。

出版物になれば、売れると思います。

Re: No title

yanoさん、ありがとうございます。
お役に立てて何よりです。

この「ほんっとに…」を書籍にしたいという依頼はあるんですが、今までは全部お断りしてました。
このページを見てもわかるように、仕様はどんどん変わるから。本になってもすぐに無駄になると思って。

でも、yanoさんにおだててもらって「本にしたら儲かるかな?」なんて妄想も湧いちゃいました。
コメントありがとうございました!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.