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

最終更新日:2017年11月01日  (初回投稿日:2011年08月08日)

今回は、円形(放射状)グラデーションを作ってみましょう。

線形グラデーションは、
[13-3] サイト背景にCSSで線形グラデーションをつけよう (CSS使用)をご覧ください。

使用する
CSSプロパティ
background

参考:CSS Image Values and Replaced Content Module Level 3

本日のINDEX
  1. 円形グラデーションを指定してみよう
    1. 円形グラデーションの構文
    2. 「開始色」「終了色」の2つが最低限必要
  2. 色を途中で変えてみよう(カラーストップについて)
  3. 中心点やサイズの指定
  4. 古いブラウザ用の「ベンダープレフィックス」

2017年10月:サンプルファイルを変更しました。それに伴い本文も編集しました。

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

2013年11月:初回投稿時(2011年8月)から、radial-gradient の構文が変更されているため、ページは全面変更しました。

★メモ★
グラデーションを指定するCSSプロパティは「background-image」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。
この記事は、ショートハンドプロパティ background だけで指定する方法で書いています。
background-imagebackgroundのショートハンドについては、
●background-image【15-1】background関連のプロパティ(1/4)
●backgroundのショートハンド【15-5】backgroundのショートハンド まとめ
をご覧ください。

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

サンプルファイルでは、見出し要素 <h3> のアタマに装飾として正円を置き、円形グラデーションで二重丸にしています。
(クリックで別ウィンドウでサンプルが開きます)

サンプルファイルの HTML, CSS ソースコードをブラウザで見るには、
[14-1] ブラウザでソースを表示する を参考にしてください。

#mainContent h3 {
	color:#d9a7c7;
	font-size:1.2em;
	margin:2em 0 0;
	}
#mainContent h3::before {
	content:"";
	display:inline-block;
	vertical-align:text-top;
	width:1.2em;
	height:1.2em;
	margin-right:.1em;
	border-radius:50%;
	background:rgba(217, 167, 199, 0.5); /*for Old*/
	background:-webkit-radial-gradient(circle 1.2em, #d9a7c7 50%, #fff 65%, #fff 75%,#d9a7c7 90%, #fff 100%);
	background:radial-gradient(circle farthest-side, #d9a7c7 50%, #fff 65%, #fff 75%,#d9a7c7 90%, #fff 100%);
	}

内側からピンク(#d9a7c7)、白(#fff)、ピンク(#d9a7c7)で円形グラデーションを指定しています。

円形グラデーションの構文

ボックスの左上が中心で、白から黒の円形グラデーションを作ってみます。

Sample

CSS は下記のようになっています。

background: radial-gradient(circle farthest-side at left top, white, black);

円形グラデーションの構文はこのようになっています。

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

「開始色」「終了色」の2つが最低限必要

最低限必要な「開始色」「終了色」だけを指定したサンプルです。
省略された「形 サイズ at 中心点」は、それぞれデフォルト値になります。

Sample
#sample {
	background:radial-gradient(yellow, cyan);
	}

デフォルト値も全部書いた CSSはコレ。

#sample {
	background:radial-gradient(ellipse farthest-corner at center, yellow 0%, cyan 100%);
	}

色は「ウェブカラーネーム」で指定しています。
色指定については [14-4] 色指定について(16進数、色名、10進数、パーセント)をご覧ください。

中心点だけ変更します。右上のコーナーを中心点にしました。

Sample
#sample {
	background: radial-gradient(at right top, yellow, cyan);
	}

「at 中心点」と書きます。「at」を忘れずに。

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

yellow と cyan の間に white を入れてみました。
デフォルトでは、開始色は円の中心点=0%、終了色はサイズ=100%、途中の色はその中間=50%になっています。

Sample
#sample {
	background: radial-gradient(yellow, white, cyan);
	}

色の切り替え位置(カラーストップ)を指定します。
ここでは白の開始位置を30%の位置、シアンの開始位置を60%に指定しています。

Sample
#sample {
	background: radial-gradient(yellow, white 30%, cyan 60%);
	}

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

Sample
#sample {
	background: radial-gradient(yellow, white 30%, cyan 150%);
	}

中心点やサイズの指定

300×100px のボックスに、サイズは半径 40px の正円、中心点は x方向 40px, y方向 60px で指定しています。

Sample
#sample {
	background: radial-gradient(40px at 40px 60px,yellow, white, cyan);
	}

以下の指定でもまったく同じプレビューになります。
形を「正円(circle)」、サイズを「一番近い辺(closest-side)」にすることで、中心点から一番近い辺までの距離が 40px なので。

Sample
#sample {
	background: radial-gradient(circle closest-side at 40px 60px,yellow, white, cyan);
	}

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

構文の「標準型」に対応する前のブラウザバージョンのために、ベンダープレフィックスがありました。

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

標準型の構文はこう↓でしたが、
radial-gradient(形状 サイズ at 円の中心点, 開始色, 終了色)

webkit系のベンダープレフィックスはこちら。
-webkit-radial-gradient(円の中心点, 形状 サイズ, 開始色, 終了色)
「at」は使わないのと、円の中心点が先頭、そのあと「,(カンマ)」で区切ります。「形状」と「サイズ」のあいだはカンマは使いません。

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

Sample

上のサンプルの、ベンダープレフィックスも併記した CSSソースです。

#sample7 {
	background: #0ff; /*←グラデーションに未対応のブラウザ用*/
	background: -webkit-radial-gradient(right bottom,circle 100px,white, yellow, cyan);
	background: radial-gradient(circle 100px at right bottom,white, yellow, cyan);
	}

次回予告

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

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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