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

この記事にはベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、 2015年2月では、ほとんどのブラウザが対応しておりベンダープレフィックスはもう不要ですので、本文中のソースから削除しました。
ただし、構文が標準型と異なるため、参考資料として ベンダープレフィックスの書き方を下部に残しておきました。(2015年2月追記)

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

前回、サイト背景のグラデーションを、画像を貼って指定する方法を紹介しましたが、
「CSS3」なら簡単に線形グラデーションを指定できます。
画像を貼る方法では絶対にできない「斜め方向」のグラデーションもCSS3なら可能です。

今回は下図のようなCSS3のグラデ指定をやってみましょう。

※上のプレビュー画像をそれぞれクリックすると、サンプルが別ウィンドウで開きます。

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

★メモ★
グラデーションを指定するCSSプロパティは、厳密には「background-image」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。

この記事は、ショートハンドプロパティ background だけで指定する方法で書いています。

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

★円形(放射状)グラデーションはコチラです→[18-4] CSS3で円形グラデーションを作ろう

サンプルファイルのダウンロードはこちら

★サンプルをこちらからダウンロードできます。
→本日のサンプル(sample13-3set.zip (8k))をダウンロード

線形グラデーションを指定してみよう

#samp1

ボックスの上から下へ、白から黒の線形グラデーション。
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と同じ。色の切り替えは後述。
    開始色の始まりの位置は、角度(または方向)の「開始点」がデフォルト。
    終了色の終わりの位置は、角度(または方向)の「終了点」がデフォルト。

縦方向にグラデを指定(sample13-3_1)

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

honttoni13-3_1y.html  ←画像クリックでサンプルファイルを開きます(別ウィンドウで開く)

body {
	width:100%;
	margin:0;
	padding:0;
	color:#666;
	font-family:Century Gothic, Arial, sans-serif;
	line-height: 18px;
/*背景の指定*/
	background:#9c0;
	background: linear-gradient(#ff9, #9c0);  /*方向は省略_デフォルトの to bottom になる*/
}

縦方向の線形で、黄色(#FF9)から緑色(#9C0)へのグラデーションを指定しています。
「上から下」はデフォルトなので、方向(角度)は省略してOK。
省略しない書き方は「linear-gradient(to bottom, #ff9, #9c0);」
または「linear-gradient(180deg, #ff9, #9c0);」です。

縦方向のグラデーションを理解したら、
横方向のグラデーションは、方向の部分を「to right(または to left)」と書き変えるだけです。
「linear-gradient(to right, #ff9, #9c0);」といったかんじです。
サンプルのCSSファイルを書き変えて実験してみてください。

グラデーションの途中で色を変える方法もありますが、それはこのすぐあと↓。

斜め方向にグラデを指定 & 途中で色を切り替えよう(sample13-3_2)

斜め方向のグラデーションと、グラデの途中で色を切り替えてみます。

honttoni13-3_2xy.html ←画像クリックでサンプルファイルを開きます(別ウィンドウで開く)

body {
	width:100%;
	margin:0;
	padding:0;
	color:#666;
	font-family:Century Gothic, Arial, sans-serif;
	line-height: 18px;
/*背景の指定*/
	background:#3cc;
	background: linear-gradient(to bottom right, #FCC, #CF6 20%, #3CC 40%, #006 70%);
}

このサンプルは左上から右下への斜め方向グラデーションを指定しています。

さて、このサンプルでは、途中で2回色を変えて、合計4色のグラデーションを指定しています。
そして最終色は70%のところから始めています。

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

途中で色を変える記述の違い


開始色の開始位置は「0」がデフォルトなので、省略してもOK。
開始位置を「0」以外にしたければ値を指定します。
ピクセル単位で指定してもOK。(「#fcc 100px」などと、% の代えて px を指定します)

透明度を指定する(sample13-3_3)

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

honttoni13-3_3a.html ←画像クリックでサンプルファイルを開きます(別ウィンドウで開く)

このサンプルでは、下図のようにサイトの背景(<body>に指定)に GIFファイルのタイリングをして、 <header>にグラデーションを指定しました。
グラデの開始色だけに透明度を指定して<body>の背景が透けて見えるようにしています。
終了色には透明度を指定していないので、透明度はだんだん100%(不透明)になります。

honttoni13-3_3a.html

header {
	width: 600px;
	margin: 0px auto;
	padding: 30px;
	color: #fff;
/*headerの背景の指定*/
	background:#009;
	background: linear-gradient(to right, rgba(0,153,255,0.5), #009);
}

透明度を指定するために「rgba」を使っています。
rgbaは、色をRGB値で指定し、最後にその色の透明度(アルファ値)も指定できます。

開始色のブルー(#09F)は、RGBでは「0,153,255」で表されるので、
rgba(0,153,255,0.5) と書いています。
最後の「0.5」がアルファ値(透明度)で、0.5(50%)を指定しています。

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

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

古いブラウザ用の「ベンダープレフィックス」と IE9以下の「filter」

(このセクションは2015年2月に編集しています)
ほとんどのブラウザの最新版は「標準型」でOKなんですが、「標準型」に対応していないバージョンのブラウザのために、ベンダープレフィックスがあります。

linear-gradient() は、Android(webkit系)では4.4(2013年10月リリース)からの対応で、Androidのそれ以前のバージョンのために、まだベンダープレフィックスが必要という情報もありますので、一応この部分を残しておきます。

webkit系(moz系も同じ構文です)の線形グラデーションの指定は、
「方向」の部分が標準型と違うだけ。
下記のように、開始点の指定で暗示的に方向を示します。

  • 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以下のために「filter」という IEの独自拡張を指定しておく方法もあります。
これは2色まで(開始色と終了色だけ)ですが、単色で指定するより良いでしょう。
本日の最初のサンプル(sample13-3_1)なら、下記を追加しておきます。
一番最後の GradientType=0 が縦方向、GradientType=1 が横方向です。

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9', endColorstr='#9c0',GradientType=0 );

また、IE8以下に線形グラデーションを対応させるには CSS3 PIE を使用する方法もあります。
IE8以下はかなりシェアが少なくなっていると思われますが、IE8以下ユーザをターゲットにする場合には、CSS3 PIE はかなり有効です。

次回予告

線形グラデーションはけっこう使えますよね。画像を作る手間が省けるし。

★円形(放射状)グラデーションはコチラです→[18-4] CSS3で円形グラデーションを作ろう

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

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

No title

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

Re: No title

たらこさん
コメントありがとうございます。お役に立てて何よりです。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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