[18-4] CSS3で、円形(放射)グラデーションを作ろう (radial-gradient)

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

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

今回は、円形(放射状)グラデーションを使ってみます。
「線形グラデーション」はこちら。

使用する
CSSプロパティ
background

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

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

サンプルは [ 18-1 ] と同じです

★左の画像をクリックすると別ウィンドで開きます。
★サンプルファイルを一式、zipでダウンロードもできます。
→本日のサンプル(sample18set.zip (4k))をダウンロード

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

サンプルファイルでは、<h1>の中の <div>要素を、border-radiusで正円にし、円形グラデーションも指定しています。
CSSの指定は下記のようにしています。divのid名は「ball」です。
セレクタ(article h1 div#ball)は、「articleの中の h1の中の #ballというid名の div」という意味。

article h1 div#ball{
	float:left;
	width:26px;
	height:26px;
	margin-right:5px;
	border-radius:13px;
/* backgroundの円形グラデーションの指定 */
	background: #FF9; 	/* IE 6〜9のために、必ず背景色を指定しておきます */
	background: radial-gradient(circle at center, #9FF 20%, #9F0 40%, #FF9 100%);
}

内側からブルー(#9FF)グリーン(#9F0)イエロー(#FF9)の3色使ってます。

円形グラデーションを作ってみよう

#samp1

ボックスの左上が中心で、白から黒の楕円形グラデーションを作ってみます。
CSS は下記のようになっています。

background: radial-gradient(ellipse farthest-corner at left top, white, black);

この円形グラデーション指定の構文について、以下で解説します。

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

  • 「形 サイズ at 中心点」までは半角スペースで区切ります(「,(カンマ)」とか使わない)
    その後は「,(カンマ)」で一旦区切り、色指定が続きます。
  • 形のデフォルトは「ellipse」。略すと「サイズ」に従います。
  • サイズのデフォルトは「farthest-corner」というキーワード。
    サイズの指定はこのほか、ピクセル指定でも、%でもOK。その場合は「x方向 半角スペース y方向」で指定。(ただし正円の場合は%はNG)
    キーワードは4つ
    • closest-side(1番近い辺)
    • farthest-side(1番遠い辺)
    • closest-corner(1番近い角)
    • farthest-corner(1番遠い角:デフォルト)
  • 中心点のデフォルトは「center」
    中心点の指定はこのほか left、center、right、top、bottomの組み合わせでも、ピクセル指定、%でもOK。その場合は「x座標 半角スペース y座標」で指定。
  • 開始色, 終了色 は最低限必要です。色指定はCSSと同じ。色の切り替えは後述。
    開始色の始まりの位置は「円の中心点」がデフォルト。
    終了色の終わりの位置は「サイズ」がデフォルトです。

「形 サイズ at 中心点」を略した、1番シンプルな指定

#samp2

上のサンプル2は、こんなにシンプルな指定です。
省略された「形 サイズ at 中心点」は、それぞれデフォルト値になっています。

background: radial-gradient(yellow, cyan);

以下の指定でも、上のプレビューとまったく同じものができます。

radial-gradient(ellipse farthest-corner at center, #ff0 0%, #0ff 100%);
radial-gradient(ellipse at center, yellow 0%, cyan 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, cyan);

1行目は、きまじめに全部の値を指定したもの。
2行目は、形状 中心点を指定。
3行目は、サイズと中心点を指定。
色指定には、このほか「rgb(255,0,0)」「rgb(100%,0%,0%)」が使えます。
色指定について詳しくは「 [14-4] 色指定について(16進数、色名、10進数、パーセント)」をご覧ください。

色を途中で変えてみよう(カラーストップについて)

#samp3

yellowとcyanの間に白(white)を入れてみました。
上のサンプルのCSSの指定は下記。

background: radial-gradient(yellow, white, cyan);
#samp4

色の切り替え位置(カラーストップ)を指定しています。
上のサンプルのCSSの指定は下記。

background: radial-gradient(yellow, white 30%, cyan 60%);

デフォルトでは、開始色は円の中心点=0%、終了色はサイズ=100%、途中の色はその中間=50%になっています。
ここでは白を30%の位置、終了色のシアンを60%の位置に指定しています。

#samp5

終了色のシアンを150%の位置に指定しています。
このように「サイズ」以上の値も指定できます。(ただしマイナスの値は指定できません)

background: radial-gradient(yellow, white 30%, cyan 150%);

中心点やサイズの指定

#samp6

中心点を右下にしています。

background: radial-gradient(at right bottom,yellow, white, cyan;

以下の指定でもまったく同じプレビューになります。
サンプルのボックスは、300×100ピクセルです。

background: radial-gradient(at 300px 100px,yellow, white, cyan);
#samp7

サイズや中心点を任意の値に指定しました。

background: radial-gradient(40px 40px at 40px 60px,yellow, white, cyan);

以下の指定でもプレビューは同じです。
#samp7 ではサイズを「40px 40px」とすることで正円にしています。
closest-sideでサイズを最も近い辺までにし、circleで形状を正円にしても同じです。

background: radial-gradient(closest-side circle at 40px 60px,yellow, white, cyan);

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

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

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

上の #samp7 の指定に、webkit系のベンダープレフィックスを併記するとこのようになります。

background: #0ff;
background: -webkit-radial-gradient(40px 60px, 40px 40px,yellow 0px, white 20px, cyan 40px);
	/* 標準用 ↓必ず最後に書きます */
background: radial-gradient(40px 40px at 40px 60px,yellow, white, cyan);

1行目で背景色のみ指定しておきます。IE9まではグラデーションに対応していないので必要です。
暗色グラデーションに白文字の場合、IE9以下のユーザには文字が読めない(白地に白文字で)という事態も!要注意です。

2行目がwebkit系(moz系も同じ構文です)のベンダープレフィックス。
()内は、円の中心点の位置, 形状 サイズ, 開始色, 終了色の順で「, カンマ」で区切って指定します。「形状」と「サイズ」の間は「半角スペース」。カンマは使いません。

標準型と同様に、「開始色, 終了色」は必須ですが、他は省略OK。省略でデフォルト値になります。

次回予告

この記事の投稿日は「2011.08.08」になっていますが、2013年11月に構文を全て書き換えました。
さらに2015年2月には、ベンダープレフィックスの記述を削除&整理しました。

次回は、CSS3のグラデーションの応用です。
「水玉模様」「たて縞・よこ模様・タータンチェック」を作ってみましょうす。
「background-size」という新しいプロパティで、グラデーションで作った図形をタイリングして、 模様を作ってみましょう。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 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.