From ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Jun 2021 00:34:51 +0000 Subject: [CRON] sync translated content --- files/ja/web/css/radial-gradient()/index.html | 174 -------------------------- 1 file changed, 174 deletions(-) delete mode 100644 files/ja/web/css/radial-gradient()/index.html (limited to 'files/ja/web/css/radial-gradient()') diff --git a/files/ja/web/css/radial-gradient()/index.html b/files/ja/web/css/radial-gradient()/index.html deleted file mode 100644 index cd31362e49..0000000000 --- a/files/ja/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

CSS の radial-gradient() 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。

- -
{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}
- - - -

構文

- -
/* コンテナーの中央にあるグラデーション、
-   赤で始まり、青へ変わり、緑で終わる */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

値

- -
-
{{cssxref("<position>")}}
-
グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は center です。
-
<shape>
-
グラデーションの形状です。値は circle (つまり、グラデーションの形状が一定の半径の円) か ellipse (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は ellipse です。
-
<extent-keyword>
-
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-corner既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。
- -
-

注: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。

-
-
-
<linear-color-stop>
-
色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。
-
<color-hint>
-
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-
- -

解説

- -

他のグラデーションと同様、放射グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。

- -

繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。

- -

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

- -

放射グラデーションの構成

- -

放射グラデーションは中心位置、最終的な形状、および二つ以上の色経由点で定義されます。

- -

滑らかなグラデーションを生成するために、 radial-gradient() 関数は中央から最終的な形状 (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。

- -

色経由点は、中心から右方向に水平に延びる仮想的なグラデーション光の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。

- -

例

- -

シンプルなグラデーション

- - - -
.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

- -

中央から外れたグラデーション

- - - -
.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

- -

他の radial-gradient の例

- -

他の例は CSS グラデーションの使用を参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの互換性

- - - -
{{Compat("css.types.image.gradient.radial-gradient")}}
- -

Quantum CSS のメモ

- -

Gecko は radial-gradient(circle gold,red) のような放射グラデーションが動きそうで、 circle と gold との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が radial-gradient() 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf