diff options
Diffstat (limited to 'files/ja/web/css/gradient/index.html')
| -rw-r--r-- | files/ja/web/css/gradient/index.html | 184 |
1 files changed, 0 insertions, 184 deletions
diff --git a/files/ja/web/css/gradient/index.html b/files/ja/web/css/gradient/index.html deleted file mode 100644 index 6192d160da..0000000000 --- a/files/ja/web/css/gradient/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -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><gradient></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。</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><gradient></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"><div class="linear-gradient">Linear gradient</div> -</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"><div class="radial-gradient">Radial gradient</div> -</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"><div class="linear-repeat">Repeating linear gradient</div> -<br> -<div class="radial-repeat">Repeating radial gradient</div> -</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"><div class="conic-gradient">Conic gradient</div> -</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', '<gradient>')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>conic-gradient を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<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> |