initial commit

1 files changed, 166 insertions, 0 deletions

diff --git a/files/ja/web/css/repeating-linear-gradient()/index.html b/files/ja/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..a34d03a051
--- /dev/null
+++ b/files/ja/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,166 @@
+---
+title: repeating-linear-gradient()
+slug: Web/CSS/repeating-linear-gradient()
+tags:
+  - CSS
+  - CSS 画像
+  - CSS 関数
+  - Reference
+  - ウェブ
+  - グラフィック
+  - レイアウト
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>repeating-linear-gradient()</code> 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("&lt;gradient&gt;")}} データ型のオブジェクトであり、これは {{cssxref("&lt;image&gt;")}} の特殊型です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。</p>
+
+<p>他のグラデーションと同じく、線形反復グラデーションも<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p>
+
+<p><code>&lt;gradient&gt;</code> は CSS の <code>&lt;image&gt;</code> データ型に所属しますので、 <code>&lt;image&gt;</code> が使用できるところでのみ使用できます。このため、 <code>repeating-linear-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("&lt;color&gt;")}} を要求するプロパティでは動作しません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 45度方向に軸を延ばし、青で始め赤で終わり、
+   3回繰り返す反復グラデーション */
+repeating-linear-gradient(45deg, blue, red 33.3%);
+
+/* 右下から左上に延び、青で始め赤で終わり、
+   20px ごとに繰り返す反復グラデーション */
+repeating-linear-gradient(to left top, blue, red 20px);
+
+/* 下から上に延び、青で始め、 40% から緑になり、赤で終わる
+   グラデーション。最後の色経由点が既定で 100% なので、
+   グラデーションは繰り返されない */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+/* 5回繰り返し、左から右に、赤で始まり、緑に変わり、
+   赤に戻るグラデーション */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>グラデーション線の開始点の位置。指定する場合は、 <code>to</code> に続けて2つ以下のキーワードを指定します。一つは水平方向の辺 (<code>left</code> または <code>right</code>)、もう一方は垂直方向の辺 (<code>top</code> または <code>bottom</code>) です。辺を表すキーワードは順不同です。指定しない場合は、 <code>to bottom</code> が既定になります。</dd>
+ <dd><code>to top</code>, <code>to bottom</code>, <code>to left</code>, <code>to right</code> の値は、 <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> の角度にそれぞれ対応します。他の値は角度に変換されます。</dd>
+ <dt>{{cssxref("&lt;angle&gt;")}}</dt>
+ <dd>グラデーション線の方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>色経由点の {{CSSxRef("&lt;color&gt;")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("&lt;percentage&gt;")}} または {{CSSxRef("&lt;length&gt;")}} の位置)。 <code>0%</code> のパーセント値または <code>0</code> の長さは、グラデーションの先頭を表します。 <code>100%</code> の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd>
+ <dd>
+ <div class="note">
+ <p><strong>メモ:</strong> <a href="#Gradient_with_multiple_color_stops">CSS グラデーションにおける色経由点</a>の描画は、 <a href="/ja/docs/Web/SVG/Tutorial/Gradients">SVG グラデーション</a>と同じ規則に従います。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/ja/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+                            \---------------------------------/ \---------------/
+                              Definition of the gradient line   List of color stops
+
+where &lt;side-or-corner&gt; = [left | right] || [top | bottom]
+  and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+  and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
+</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Zebra_stripes" name="Zebra_stripes">縞模様</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* 複数の色経由点の位置 */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Zebra_stripes', 120, 120)}}</p>
+
+<h3 id="Ten_repeating_horizontal_bars" name="Ten_repeating_horizontal_bars">10回繰り返す水平線</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}}</p>
+
+<p>最後の色経由点が10%であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは10%の高さになり、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-linear-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-linear-gradient")}}</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
+ <li>他のグラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>