diff options
| author | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2021-06-19 00:34:51 +0000 |
| commit | ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b (patch) | |
| tree | 03e6f19fc527ab750be01344add09afba6bcb6dd /files/ja/web/css | |
| parent | 3e028982e4bc6762a47268f86fe395670a11c160 (diff) | |
| download | translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.gz translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.tar.bz2 translated-content-ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/ja/web/css')
| -rw-r--r-- | files/ja/web/css/conic-gradient()/index.html | 269 | ||||
| -rw-r--r-- | files/ja/web/css/image-set()/index.html | 87 | ||||
| -rw-r--r-- | files/ja/web/css/linear-gradient()/index.html | 218 | ||||
| -rw-r--r-- | files/ja/web/css/radial-gradient()/index.html | 174 | ||||
| -rw-r--r-- | files/ja/web/css/repeating-linear-gradient()/index.html | 166 | ||||
| -rw-r--r-- | files/ja/web/css/repeating-radial-gradient()/index.html | 186 |
6 files changed, 0 insertions, 1100 deletions
diff --git a/files/ja/web/css/conic-gradient()/index.html b/files/ja/web/css/conic-gradient()/index.html deleted file mode 100644 index bd847a2406..0000000000 --- a/files/ja/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/conic-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/conic-gradient() ---- -<div>{{CSSRef}}</div> - -<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 <code>conic-gradient()</code> 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<p>他のグラデーションと同様、扇形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <code><image></code> の寸法に一致します。</p> - -<p>繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。</p> - -<p>g</p> - -<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>conic-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> - -<div class="blockIndicator note"> -<p>なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。</p> -</div> - -<h2 id="Understanding_conic_gradients" name="Understanding_conic_gradients">扇型グラデーションの理解</h2> - -<p>扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> - -<p><img alt="扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点" src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p> - -<p>扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。<a href="/ja/docs/Web/CSS/length">長さ</a>を指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には<a href="/ja/docs/Web/CSS/angle">度</a>を表す <code>deg</code>、グラデーションを表す <code>grad</code>、ラジアンを表す <code>rad</code>、回転数を表す <code>turn</code> があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。</p> - -<p>放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。</p> - -<p>グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の<em>始点</em>は北、つまり12時の方向です。そして、グラデーションは <em>from</em> の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。</p> - -<h3 id="Customizing_gradients" name="Customizing_gradients">グラデーションのカスタマイズ</h3> - -<p>By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("<angle>")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent</p> - -<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue); -conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre> - -<p>By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.</p> - -<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre> - -<p>If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); -conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre> - -<p>Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient</p> - -<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); -</pre> - -<p>There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.</p> - -<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); -background-size: 25% 25%; -</pre> - -<p>And, yes, you can mix and match different angle units, but don't. The above is hard to read.</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="language-css notranslate" id="css">/* 45度回転した扇形グラデーション、 - 青で始まり赤で終わる */ -conic-gradient(from 45deg, blue, red); - -/* A a bluish purple box: the gradient goes from blue to red, - but as only the bottom right quadrant is visible, as the - center of the conic gradient is in at the top left corner */ -conic-gradient(from 90deg at 0 0, blue, red); - -/* 色相環 */ -background: conic-gradient( - hsl(360, 100%, 50%), - hsl(315, 100%, 50%), - hsl(270, 100%, 50%), - hsl(225, 100%, 50%), - hsl(180, 100%, 50%), - hsl(135, 100%, 50%), - hsl(90, 100%, 50%), - hsl(45, 100%, 50%), - hsl(0, 100%, 50%) -);</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{CSSxRef("<angle>")}}</dt> - <dd>Preceded by the <code>from</code> keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.</dd> - <dt><code><position></code></dt> - <dd>Using the same length, order and keyterm values as the <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property, the position defines center of the gradient. If omitted, the default value is <code>center</code>, meaing the gradient will be centered, .</dd> - <dt><code><angular-color-stop></code></dt> - <dd>A color-stop's {{CSSxRef("<color>")}} value, followed by one or two optional stop positions, (an {{CSSxRef("<angle>")}} along the gradient's circumference axis).</dd> - <dt><code><color-hint></code></dt> - <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> - <dd> - <div class="note"> - <p><strong>Note:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p> - </div> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -<pre class="syntaxbox notranslate">conic-gradient( - [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> ) - \---------------------------------/ \----------------------------/ - Gradient definition List of color stops - -where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop> - and <angular-color-stop> = <color> && <color-stop-angle>? - and <angular-color-hint> = <angle-percentage> - and <color-stop-angle> = <angle-percentage>{1,2}</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<div> -<h3 id="Gradient_at_a_40-degrees" name="Gradient_at_a_40-degrees">40度のグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background-image: - conic-gradient(from 40deg, #fff, #000); -} -</pre> - -<p>{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}</p> -</div> - -<div> -<h3 id="Off-centered_gradient" name="Off-centered_gradient">中心をずらしたグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); -}</pre> - -<p>{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}</p> -</div> - -<div> -<h3 id="Gradient_pie-chart" name="Gradient_pie-chart">グラデーションの円グラフ</h3> - -<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% -}</pre> - -<p>{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}</p> -</div> - -<div> -<h3 id="Checkerboard">Checkerboard</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">div { - width: 100px; - height: 100px; -}</pre> - -<pre class="brush: html notranslate"><div></div> -</pre> -</div> - -<pre class="brush: css notranslate">div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; - border: 1px solid; -}</pre> - -<p>{{EmbedLiveSample("Checkerboard", 120, 120)}}</p> -</div> - -<div class="note"> -<p><strong>注:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p> -</div> - -<h2 id="Acessibility_Concerns" name="Acessibility_Concerns">アクセシビリティの考慮事項</h2> - -<p>Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<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', '#conic-gradients', 'conic-gradient()')}}</td> - <td>{{Spec2('CSS4 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.conic-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("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-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> diff --git a/files/ja/web/css/image-set()/index.html b/files/ja/web/css/image-set()/index.html deleted file mode 100644 index a3f00ddc18..0000000000 --- a/files/ja/web/css/image-set()/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -translation_of: Web/CSS/image-set() ---- -<div>{{cssref}}</div> - -<p class="summary"><strong><code>image-set()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。</p> - -<p>解像度と帯域は端末やネットワークアクセスによって様々です。 <code>image-set()</code> 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。</p> - -<p><code>image-set()</code> はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) -where <image-set-option> = [ <image> | <string> ] <resolution> and - <string> is an <url> -</pre> - -<h3 id="Values" name="Values">値</h3> - -<p>もっともよく見かけるのは <code>url()</code> または <code><string></code> 値ですが、 <code><a href="/ja/docs/Web/CSS/image"><image></a></code> は画像セット以外のあらゆる画像型を取ることができます。 <code>image-set()</code> 関数は他の <code>image-set()</code> 関数の中に入れることはできません。</p> - -<p><code><a href="/ja/docs/Web/CSS/resolution"><resolution></a></code> の単位には、ピクセル当たりのドット数を表す <code>x</code> または <code>dppx</code>、インチ当たりのドット数を表す <code>dpi</code>、センチメートル当たりのドット数を表す <code>dpcm</code> があります。 <code>image-set()</code> の中の画像はすべて、固有の解像度が必要です。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_image-set_to_provide_alternative_background-image_options" name="Using_image-set_to_provide_alternative_background-image_options">image-set() を使用して代替の background-image オプションを提供する</h3> - -<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x, - "cat-2x.png" 2x, - "cat-print.png" 600dpi);</pre> - -<p>この例は <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> - -<p>ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>仕様書</th> - <th>状態</th> - <th>備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> - <td>{{Spec2('CSS4 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> - -<p>{{Compat("css.types.image.image-set")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/linear-gradient()/index.html b/files/ja/web/css/linear-gradient()/index.html deleted file mode 100644 index 95fb315074..0000000000 --- a/files/ja/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - Web - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>linear-gradient()</code></strong> 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-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>他のグラデーションと同様、線形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。</p> - -<p>繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。</p> - -<p><code><gradient></code> は CSS の <code><image></code> データ型に所属しますので、 <code><image></code> が使用できるところでのみ使用できます。このため、 <code>linear-gradient</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。</p> - -<h2 id="Composition_of_a_linear_gradient" name="Composition_of_a_linear_gradient">線形グラデーションの構成</h2> - -<p>線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 <code>linear-gradient()</code> 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p> - -<p>グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 <em>終了点</em> (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。</p> - -<p>開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、<em>マジックコーナー</em>と呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。</p> - -<h3 id="Customizing_Gradients" name="Customizing_Gradients">グラデーションのカスタマイズ</h3> - -<p>グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。</p> - -<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</pre> - -<p>ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から10%の位置まで、純粋な青を90%の位置から末尾までに配置します。10%から90％までの間は、赤から青への色変化ですが、色ヒントがない30%があるので、変化の中間点は50%の位置ではなく30%の位置になります。</p> - -<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre> - -<p>2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。</p> - -<p>色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。</p> - -<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%); -</pre> - -<p>複数位置の色経由点が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。</p> - -<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</pre> - -<p>既定では、0%の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が100%の位置まで続くか、100%の位置の色になります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="language-css notranslate" id="css">/* 45度に傾いたグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(45deg, blue, red); - -/* 右下から左上に向かうグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(to left top, blue, red); - -/* 色経由点: 下から上に向かうグラデーションで、 - 青から始まり、長さの40%ののところで緑になり、 - 赤で終わる */ -linear-gradient(0deg, blue, green 40%, red); - -/* 色ヒント: 左から右に向かうグラデーションで、 - 赤から始まり、グラデーションの長さ全体の - 10%に中間点が来て、残りの90%の長さをかけて - 青色に変わる */ -linear-gradient(.25turn, red, 10%, blue); - -/* 複数位置の色経由点: 45度傾いたグラデーションで、 - 左下半分が赤で右上半分が青、 - 赤から青への変化は明確な線 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%);</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><side-or-corner></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("<angle>")}}</dt> - <dd>グラデーションラインの方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd> - <dt><code><linear-color-stop></code></dt> - <dd>色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。</dd> - <dt><code><color-hint></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">linear-gradient( - [ <a href="/ja/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [ left | right ] || [ top | bottom ] - 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="Gradient_at_a_45-degree_angle" name="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(45deg, red, blue); -} -</pre> - -<p>{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}</p> - -<h3 id="Gradient_that_starts_at_60_of_the_gradient_line" name="Gradient_that_starts_at_60_of_the_gradient_line">グラデーションラインの60%から始まるグラデーション</h3> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(135deg, orange, orange 60%, cyan); -}</pre> - -<p>{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}</p> - -<h3 id="Gradient_with_multi-position_color_stops" name="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3> - -<p>この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。</p> - -<div class="hidden"> -<pre class="brush: css notranslate">body { - width: 100vw; - height: 100vh; -}</pre> -</div> - -<pre class="brush: css notranslate">body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -}</pre> - -<p>{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}}</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('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>補間のヒントを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#linear-gradients', '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.linear-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("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> - <li>{{CSSxRef("<image>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/radial-gradient()/index.html b/files/ja/web/css/radial-gradient()/index.html deleted file mode 100644 index cd31362e49..0000000000 --- a/files/ja/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>radial-gradient()</code></strong> 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。</p> - -<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* コンテナーの中央にあるグラデーション、 - 赤で始まり、青へ変わり、緑で終わる */ -radial-gradient(circle at center, red 0, blue, green 100%)</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>終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - <table class="standard-table"> - <thead> - <tr> - <th>キーワード</th> - <th>説明</th> - </tr> - </thead> - <tbody> - <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><linear-color-stop></code></dt> - <dd>色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が <code>0%</code>、または length が <code>0</code> の場合は、グラデーションの中心を表します。 <code>100%</code> は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。</dd> - <dt><code><color-hint></code></dt> - <dd>color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>他のグラデーションと同様、放射グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。</p> - -<p>繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。</p> - -<p><code><gradient></code> は <code><image></code> データ型に属するため、 <code><image></code> が使用できるところでしか使用できません。このため、 <code>radial-gradient()</code> は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> - -<h3 id="放射グラデーションの構成">放射グラデーションの構成</h3> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">放射グラデーションは<em>中心位置</em>、<em>最終的な形状</em>、および二つ以上の<em>色経由点</em>で定義されます。</p> - -<p>滑らかなグラデーションを生成するために、 <code>radial-gradient()</code> 関数は中央から<em>最終的な形状</em> (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。</p> - -<p>色経由点は、中心から右方向に水平に延びる<em>仮想的なグラデーション光</em>の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を <code>100%</code> としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Simple_gradient" name="Simple_gradient">シンプルなグラデーション</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-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} </pre> - -<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p> - -<h3 id="Non-centered_gradient" name="Non-centered_gradient">中央から外れたグラデーション</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-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -}</pre> - -<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p> - -<h3 id="More_radial-gradient_examples" name="More_radial-gradient_examples">他の radial-gradient の例</h3> - -<p>他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a>を参照してください。</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('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</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.radial-gradient")}}</div> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<p>Gecko は <code>radial-gradient(circle gold,red)</code> のような放射グラデーションが動きそうで、 <code>circle</code> と <code>gold</code> との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が <code>radial-gradient()</code> 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。</p> - -<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("repeating-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> diff --git a/files/ja/web/css/repeating-linear-gradient()/index.html b/files/ja/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index a34d03a051..0000000000 --- a/files/ja/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -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("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。</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><gradient></code> は CSS の <code><image></code> データ型に所属しますので、 <code><image></code> が使用できるところでのみ使用できます。このため、 <code>repeating-linear-gradient()</code> は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。</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><side-or-corner></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("<angle>")}}</dt> - <dd>グラデーション線の方向を角度で示します。 <code>0deg</code> の値は <code>to top</code> と等価で、値が増加するとそこから時計回りに回ります。</dd> - <dt><code><linear-color-stop></code></dt> - <dd>色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 <code>0%</code> のパーセント値または <code>0</code> の長さは、グラデーションの先頭を表します。 <code>100%</code> の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。</dd> - <dt><code><color-hint></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"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \---------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [left | right] || [top | bottom] - 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="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("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ja/web/css/repeating-radial-gradient()/index.html b/files/ja/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index 651c432c2b..0000000000 --- a/files/ja/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: 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> |