[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
● 2017年10月:サンプルファイルを変更しました。それに伴い本文も編集しました。
●
2015年02月:この記事には ベンダープレフィックス(-webkit- などの接頭辞)を使っていましたが、不要と判断し記事から削除しました。
ただし、オールドブラウザ対策として 「ベンダープレフィックス」付きの古い構文を下部にまとめて残しました。
● 2013年11月:初回投稿時(2011年8月)から、radial-gradient の構文が変更されているため、ページは全面変更しました。
★メモ★
グラデーションを指定するCSSプロパティは「background-image」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。
この記事は、ショートハンドプロパティ background だけで指定する方法で書いています。
background-image や backgroundのショートハンドについては、
●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)で円形グラデーションを指定しています。
円形グラデーションの構文
ボックスの左上が中心で、白から黒の円形グラデーションを作ってみます。
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 {
background:radial-gradient(yellow, cyan);
}
デフォルト値も全部書いた CSSはコレ。
#sample {
background:radial-gradient(ellipse farthest-corner at center, yellow 0%, cyan 100%);
}
色は「ウェブカラーネーム」で指定しています。
色指定については
[14-4] 色指定について(16進数、色名、10進数、パーセント)をご覧ください。
中心点だけ変更します。右上のコーナーを中心点にしました。
#sample {
background: radial-gradient(at right top, yellow, cyan);
}
「at 中心点」と書きます。「at」を忘れずに。
色を途中で変えてみよう(カラーストップについて)
yellow と cyan の間に white を入れてみました。
デフォルトでは、開始色は円の中心点=0%、終了色はサイズ=100%、途中の色はその中間=50%になっています。
#sample {
background: radial-gradient(yellow, white, cyan);
}
色の切り替え位置(カラーストップ)を指定します。
ここでは白の開始位置を30%の位置、シアンの開始位置を60%に指定しています。
#sample {
background: radial-gradient(yellow, white 30%, cyan 60%);
}
終了色のシアンを150%の位置に指定しています。
このように「サイズ」以上の値も指定できます。(ただしマイナスの値は不可)
#sample {
background: radial-gradient(yellow, white 30%, cyan 150%);
}
中心点やサイズの指定
300×100px のボックスに、サイズは半径 40px の正円、中心点は x方向 40px, y方向 60px で指定しています。
#sample {
background: radial-gradient(40px at 40px 60px,yellow, white, cyan);
}
以下の指定でもまったく同じプレビューになります。
形を「正円(circle)」、サイズを「一番近い辺(closest-side)」にすることで、中心点から一番近い辺までの距離が 40px なので。
#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」は使わないのと、円の中心点が先頭、そのあと「,(カンマ)」で区切ります。「形状」と「サイズ」のあいだはカンマは使いません。
標準型と同様に「開始色, 終了色」が必須。他は省略でデフォルト値になります。
上のサンプルの、ベンダープレフィックスも併記した 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プロパティで、作った図形をタイリングして模様にします。
- 関連記事
-
- [23] b要素、i要素、small要素も まだ使えます
- [22] HTML5の新要素 mark を使ってみよう
- [21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう
- [20] 上付き文字と下付き文字を使おう(sup, sub)
- [19] テキストにルビをつけてみよう(ruby, rt, rb, rp, rtc)
- (ちょっとメモ)CSS の ベンダープレフィックス について
- [18-5] 水玉、ボーダー、チェック柄を作ろう(background-size)
- [18-4] 円形(放射)グラデーションを作ろう (radial-gradient)
- [18-3] テキストにシャドウをつけよう(text-shadow)
- [18-2] 要素にシャドウをつけよう(box-shadow)
- [18-1] 要素を角丸にしよう(border-radius)
- [17-6] メインコンテンツを表す main要素
- [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
- [17-4] ナビゲーションのセクションを表す nav要素
- [17-3] セクショニング要素と見出し要素のルール
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク