IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > グラデーション > radial-gradientの解説
  カテゴリ別さくいん
  タグ別さくいん

radial-gradientの解説

円形グラデーションを表示するには?

関数書式

radial-gradient( 【中心の位置】, 【形状】, 【色指定】, 【色指定】 [, 【色指定】...])

対応ブラウザ

  • IE 9:×
  • Firefox 10.0:○(-moz-radial-gradient)
  • Opera 11.61:○(-o-radial-gradient)
  • Chrome 17.0:○(-webkit-radial-gradient)
  • Safari 5.1:○(-webkit-radial-gradient)

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

引数一覧

色指定以外の引数はすべて省略可能です。

以下、文中での「ボックス」は、プロパティが適用される要素が占める四角形の領域のことを指します。

引数内容
中心の位置【横】 【縦】円形グラデーションの中心点のボックスのなかでの位置を指定します。
指定可能な値はbackground-positionプロパティと同様です。
ボックスの左上からの、横と縦の位置について、top left bottom right centerのキーワードと、単位つきの数値による指定ができます。
省略時の既定値はcenterです。
形状circle 【サイズ】円形グラデーションは正円になります。circleとサイズの順番は逆でも構いません。サイズの省略時の既定値はcoverです。
ellipse 【サイズ】円形グラデーションは楕円になります。ellipseとサイズの順番は逆でも構いません。サイズの省略時の既定値はcoverです。「形状」自体が省略された場合は、「ellipse cover」になります。
【横軸の半径】 【縦軸の半径】円形グラデーションは横軸の半径と縦軸の半径が指定した長さの楕円になります。-moz-radial-gradient()は対応していません。
サイズclosest-side円形グラデーションは外周が中心点から最も近い辺に内接するサイズになります。
farthest-side円形グラデーションは外周が中心点から最も遠い辺に内接するサイズになります。
closest-corner円形グラデーションは外周が中心点から最も近い角に接するサイズになります。
farthest-corner円形グラデーションは外周が中心点から最も遠い角に接するサイズになります。
containclosest-sideと同じです。
coverfarthest-cornerと同じです。
色指定【色】 【長さ】中心点から外周へ向けて、指定されたそれぞれの色に、指定された順番でグラデーションしていきます。
任意の数指定可能ですが、最低限、開始と終了の二点の色は指定する必要があります。
省略可能な「長さ」を指定すると、中心と外周を結ぶ線の上で、その長さの地点になったとき、その色になるようにグラデーションします。
「長さ」を省略した場合は均等に調整されます。たとえば、開始と終了のみ色指定した場合、既定では「開始色 0%, 終了色 100%」と指定したのと同様になります。
円形グラデーションの外周が囲んでいるボックスより小さい場合は、ボックスの残りの部分は最後の色指定の色になります。

解説文

CSS3のグラデーションには線形グラデーション円形グラデーションがあり、円形グラデーションは、中心点から外周へと半径に沿って変化していくグラデーションを指します。

radial-gradient()はこの円形グラデーションを生成するCSS関数です。radial-gradient()自体はプロパティではなく、画像を指定するCSSプロパティに値として設定することで、指定した内容の円形グラデーションを表示させることができます。

仕様では、任意の画像を扱うプロパティの値として使用できることになっていますが、現状の実装では、backgroundプロパティおよびbackground-imageプロパティにのみ指定可能です。

もっとも単純な円形グラデーションの指定では、開始色と終了色のみ指定します。

以下の例では、中心の白から外周の黒へと、徐々に色彩が均等に移り変わっていきます。既定では、グラデーションの中心点の位置はボックスの中心(center center)となり、グラデーションの形状とサイズは、ボックスの頂点を外周が通る大きさ(cover)の楕円形(ellipse)になります。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(white, black);
}

色指定は任意の数追加できます。以下の例では、青から黄色へ推移し、外周で赤になります。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(blue, yellow, red);
}

以下では中心点をボックスの左端から100px、上端から150pxに移動させています。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, blue, yellow, red);
}

既定では楕円(ボックスが正方形なら正円)になりますが、形状の指定もできます。以下の例では、長方形のボックスに対して正円の円形グラデーションを指定しています。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, circle, blue, yellow, red);
}

既定ではボックスの四隅を外周が通るようなサイズの円形グラデーションになりますが、以下の例では、中心から最も近い辺に外周が接するサイズを指定しています。

この例ではボックスの左側の辺が最も近いので、グラデーションの外周が、左側の辺に接しています。ボックスの残りの部分は外周の色である赤になります。

#element_id{
   width:500px;
   height:300px;
   background-image:radial-gradient(100px 150px, circle closest-side, blue, yellow, red);
}

既定ではグラデーションは均等に行われますが、ちょうどその色になる地点を指定することもできます。色指定引数で、色の指定の後に「長さ」を指定すると、中心からの距離がその長さの地点で、ちょうどその色になるようにグラデーションが調整されます。

以下の例では、中心から外周までの距離を基準に、10%の地点までは青で、40%の地点でちょうど黄色になり、外周でちょうど赤になるように指定しています。

#element_id{
    width:500px;
    height:300px;
    background-image:radial-gradient(blue 10%, yellow 50%, red 100%);
}

サンプルソース1

※長方形のボックスに、ボックスの四隅を外周が通るサイズの、中心から青、黄、赤と推移していく楕円形の円形グラデーションを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div#box {
    width:500px;
    height:300px;
    background-image:radial-gradient(blue,yellow,red); /* 標準 */
    background-image:-moz-radial-gradient(blue,yellow,red); /* Firefox */
    background-image:-o-radial-gradient(blue,yellow,red); /* Opera */
    background-image:-webkit-radial-gradient(blue,yellow,red); /* Chrome, Safari */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

サンプルソース2

※長方形のボックスの右下の位置(400px,200px)を中心として、もっとも近い辺に外周が接するサイズで、中心が青となり、中心から70%で黄色になり、外周で黒になるように推移していく、正円の円形グラデーションを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div#box {
    width:500px;
    height:300px;
    background-image:radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* 標準 */
    background-image:-moz-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Firefox */
    background-image:-o-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Opera */
    background-image:-webkit-radial-gradient(400px 200px, circle closest-side, blue 0%, yellow 70%, black 100%); /* Chrome, Safari */
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

関連項目




Surface Arc MouseSurface Arc Mouse
Microsoftが販売するBluetoothマウス。
Surface LaptopSurface Laptop
Microsoftが販売するノートPC型の端末。
ThinkStation P320 TinyThinkStation P320 Tiny
レノボが発表した省サイズのワークステーション。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年8月21日現在
ランキング1   スミッシング (用語辞典)
ランキング2   ICT (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   デプロイ  (用語辞典)
ランキング5   セグメント  (用語辞典)
ランキング6   リーンスタートアップ  (用語辞典)
ランキング7   プラットフォーム  (用語辞典)
ランキング8   スワイプ  (用語辞典)
ランキング9   ハードコピー  (用語辞典)
ランキング10   オムニチャネル  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.