From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/repeating-radial-gradient()/index.html | 186 +++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 files/ja/web/css/repeating-radial-gradient()/index.html (limited to 'files/ja/web/css/repeating-radial-gradient()') diff --git a/files/ja/web/css/repeating-radial-gradient()/index.html b/files/ja/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..651c432c2b --- /dev/null +++ b/files/ja/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,186 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/repeating-radial-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - ウェブ + - グラデーション + - グラフィック + - レイアウト +translation_of: Web/CSS/repeating-radial-gradient() +--- +
{{CSSRef}}
+ +

CSS の repeating-radial-gradient() 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

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

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

+ +

他のグラデーションと同じく、放射反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+ +

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

+ +

構文

+ +
/* コンテナーの中央からのグラデーションで、
+   赤で始まり、青に変化し、緑で終わり、
+   それぞれ 30px ごとに色が繰り返される */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* 左上の角付近の楕円形のグラデーションで、
+   赤で始まり、緑に変化し、また戻り、
+   中央と右下の角の間で5回繰り返され、
+   中央と左上の角の間は1回だけ */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+
+ +

値

+ +
+
{{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 の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

+
+
+
<color-stop>
+
色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。
+
+ +

形式文法

+ +
repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop-list> )
+        \---------------------------------------------------------------/\-----------------/
+                  Contour, size and position of the ending shape          List of color stops
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+ +

例

+ +

白と黒のグラデーション

+ + + +
.radial-gradient {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

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

+ +

最も遠い角

+ + + +
.radial-gradient {
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%,
+      red 0 5%, green 5% 10%);
+}
+
+ +

{{EmbedLiveSample('Farthest-corner', 120, 120)}}

+ +

楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

+ +
+

メモ: 他の例は CSS グラデーションの使用 をご覧ください。

+
+ +

仕様書

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

ブラウザーの対応

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

関連情報

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