initial commit

1 files changed, 186 insertions, 0 deletions

diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html
new file mode 100644
index 0000000000..67259799d1
--- /dev/null
+++ b/files/ja/web/css/gradient/index.html
@@ -0,0 +1,186 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Data Type
+  - Graphics
+  - Layout
+  - Reference
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;gradient&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("&lt;image&gt;")}} です。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<p><code>&lt;gradient&gt;</code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p>
+
+<div id="linear-gradient">
+<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="radial-gradient">
+<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="repeating-gradient">
+<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<div id="conic-gradient">
+<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4>
+
+<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p>
+</div>
+
+<h2 id="Interpolation" name="Interpolation">補間</h2>
+
+<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3>
+
+<p>単純な線形グラデーションです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="linear-gradient"&gt;Linear gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}</pre>
+
+<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p>
+
+<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3>
+
+<p>単純な放射グラデーションです。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;Radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p>
+
+<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3>
+
+<p>単純な線形および放射の反復グラデーションの例です。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="linear-repeat"&gt;Repeating linear gradient&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="radial-repeat"&gt;Repeating radial gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}</pre>
+
+<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p>
+
+<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3>
+
+<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</p>
+
+<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('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>conic-gradient を追加</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</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")}}</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("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}</li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li>
+ <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
+</ul>