[13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
最終更新日：2017年10月31日 （初回投稿日：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つです。
線形グラデーション指定の構造
このボックスは「上から下へ、白から黒へ」の線形グラデーションを指定しています。
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）」と書き加えるだけです。
左から右へ、上のサンプルと同じ色のグラデーションを指定するとこんなかんじ。
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>の背景が透けるようにしています。
header の 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などを見るのは、とても勉強になります。
- 関連記事
-
- [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）
- [15-2] 番号付きリストを作ろう（ ol要素・li要素）
- [15-1] リストを作ろう（ ul要素・li要素 ）
- [14-4] 色指定について（16進数, 色名, 10進数, HSL, accessibility）
- [14-3] データの容量を示す単位（バイト、キロバイト、メガバイト）
- [14-2] 画像形式について（GIF、JPEG、PNG の違い）
- [14-1] ブラウザでソースを表示する
- [13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)
- [13-2] サイトの背景に画像を表示しよう（CSS使用）
- [13-1] サイトの背景に色をつけてみよう（CSS使用）
- [12-2] なんでHTMLとCSSはセットなの？
- [12-1] CSSを外部ファイルにしよう
- [11-6] ボタン画像をマウスオーバー時に変化させよう（CSS使用）
- [11-5] 画像にリンクを貼ろう
- [11-4] 別のページの特定の箇所にリンクしよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
Re: No title
コメントありがとうございます。お役に立てて何よりです。
No title
いままで使用した参考書（大体2000円くらいの）よりも
詳しく、丁寧に解説されているので、理解しやすいです。
出版物になれば、売れると思います。
Re: No title
お役に立てて何よりです。
この「ほんっとに…」を書籍にしたいという依頼はあるんですが、今までは全部お断りしてました。
このページを見てもわかるように、仕様はどんどん変わるから。本になってもすぐに無駄になると思って。
でも、yanoさんにおだててもらって「本にしたら儲かるかな？」なんて妄想も湧いちゃいました。
コメントありがとうございました！
