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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: repeating-radial-gradient()
slug: orphaned/Web/CSS/repeating-radial-gradient()
tags:
- CSS
- CSS 画像
- CSS 関数
- Reference
- ウェブ
- グラデーション
- グラフィック
- レイアウト
translation_of: Web/CSS/repeating-radial-gradient()
original_slug: Web/CSS/repeating-radial-gradient()
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>repeating-radial-gradient()</code></strong> 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。</p>
<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<p>それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。</p>
<p>他のグラデーションと同じく、放射反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>repeating-radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央からのグラデーションで、
赤で始まり、青に変化し、緑で終わり、
それぞれ 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%);
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt>{{cssxref("<position>")}}</dt>
<dd>グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は <code>center</code>です。</dd>
<dt><code><shape></code></dt>
<dd>グラデーションの形状です。 <code>circle</code> (グラデーションの形状が一定の半径の円の意味) か <code>ellipse</code> (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は <code>ellipse</code> です。</dd>
<dt><code><extent-keyword></code></dt>
<dd>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。</dd>
<dd>
<table class="standard-table">
<tbody>
<tr>
<th>キーワード</th>
<th>説明</th>
</tr>
<tr>
<td><code>closest-side</code></td>
<td>グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。</td>
</tr>
<tr>
<td><code>closest-corner</code></td>
<td>グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。</td>
</tr>
<tr>
<td><code>farthest-side</code></td>
<td><code>closest-side</code> と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。</td>
</tr>
<tr>
<td><code>farthest-corner</code></td>
<td>グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>メモ:</strong> この関数の初期の実装では、他のキーワード (<code>cover</code> および <code>contain</code>) をそれぞれ標準の <code>farthest-corner</code> および <code>closest-side</code> の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。</p>
</div>
</dd>
<dt><code><color-stop></code></dt>
<dd>色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox notranslate">repeating-radial-gradient(
[[ circle || <a href="/ja/docs/CSS/length"><length></a> ] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , |
[ ellipse || [<a href="/ja/docs/CSS/length"><length></a> | <a href="/ja/docs/CSS/percentage"><percentage></a> ]{2}] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , |
[[ circle | ellipse ] || <extent-keyword> ] [at <a href="/ja/docs/Web/CSS/position_value"><position></a>]? , |
at <a href="/ja/docs/Web/CSS/position_value"><position></a> , <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> ]</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Black_and_white_gradient" name="Black_and_white_gradient">白と黒のグラデーション</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</pre>
<pre class="brush: css notranslate">.radial-gradient {
width: 120px;
height: 120px;
}</pre>
</div>
<pre class="brush: css notranslate">.radial-gradient {
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
</pre>
<p>{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}</p>
<h3 id="Farthest-corner" name="Farthest-corner">最も遠い角</h3>
<div class="hidden">
<pre class="brush: html notranslate"><div class="radial-gradient"></div>
</pre>
<pre class="brush: css notranslate">.radial-gradient {
width: 240px;
height: 120px;
}</pre>
</div>
<pre class="brush: css notranslate">.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%);
}
</pre>
<p>{{EmbedLiveSample('Farthest-corner', 120, 120)}}</p>
<p>楕円のグラデーションは左上から20％の位置が中心となり、中心と最も遠い角 (右下の角) の間で10回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。</p>
<div class="note">
<p><strong>メモ:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<div>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
<li>他のグラデーション関数: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
<li>{{cssxref("<image>")}}</li>
<li>{{cssxref("_image","image()")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("image-set","image-set()")}}</li>
<li>{{cssxref("cross-fade")}}</li>
</ul>
|
