diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-08-22 13:49:37 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-08-22 13:49:37 +0900 |
| commit | d0d201b4f93ee8eb32e38fb35684031384cfffd8 (patch) | |
| tree | 70b357f47193ac0923fc9c5cc6ef671a9c98e832 | |
| parent | 1e5ef69352fca974bc2c3b0c507b20c97189fd1e (diff) | |
| download | translated-content-d0d201b4f93ee8eb32e38fb35684031384cfffd8.tar.gz translated-content-d0d201b4f93ee8eb32e38fb35684031384cfffd8.tar.bz2 translated-content-d0d201b4f93ee8eb32e38fb35684031384cfffd8.zip | |
Web/CSS/gradient 以下を整備 (#2061)
- orphaned 以下にあった gradient 関係の関数を Web/CSS/gradient 以下に移動
- それぞれのドキュメントを Markdown に変換
- 2021/08/13 時点の英語版に同期
- repeating-conic-gradient を新規翻訳
/linear-gradient.png?h=dependabot/github_actions/actions/cache-2.1.7&id=d0d201b4f93ee8eb32e38fb35684031384cfffd8){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/cache-2.1.7&id=d0d201b4f93ee8eb32e38fb35684031384cfffd8){kind=link}
16 files changed, 1241 insertions, 1208 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index d9336691fd..19d2a9a821 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -166,12 +166,12 @@ /ja/docs/CSS/-moz-column-width /ja/docs/Web/CSS/column-width /ja/docs/CSS/-moz-context-menu /ja/docs/Web/CSS/cursor /ja/docs/CSS/-moz-copy /ja/docs/Web/CSS/cursor -/ja/docs/CSS/-moz-linear-gradient /ja/docs/orphaned/Web/CSS/linear-gradient() +/ja/docs/CSS/-moz-linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() /ja/docs/CSS/-moz-orient /ja/docs/Web/CSS/-moz-orient /ja/docs/CSS/-moz-outline /ja/docs/Web/CSS/outline /ja/docs/CSS/-moz-outline-color /ja/docs/Web/CSS/outline-color /ja/docs/CSS/-moz-outline-offset /ja/docs/Web/CSS/outline-offset -/ja/docs/CSS/-moz-radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() +/ja/docs/CSS/-moz-radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() /ja/docs/CSS/-moz-transform /ja/docs/Web/CSS/transform /ja/docs/CSS/-moz-transform-origin /ja/docs/Web/CSS/transform-origin /ja/docs/CSS/-moz-user-input /ja/docs/Web/CSS/-moz-user-input @@ -439,7 +439,7 @@ /ja/docs/CSS/left /ja/docs/Web/CSS/left /ja/docs/CSS/letter-spacing /ja/docs/Web/CSS/letter-spacing /ja/docs/CSS/line-height /ja/docs/Web/CSS/line-height -/ja/docs/CSS/linear-gradient /ja/docs/orphaned/Web/CSS/linear-gradient() +/ja/docs/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() /ja/docs/CSS/list-style /ja/docs/Web/CSS/list-style /ja/docs/CSS/list-style-image /ja/docs/Web/CSS/list-style-image /ja/docs/CSS/list-style-position /ja/docs/Web/CSS/list-style-position @@ -478,9 +478,9 @@ /ja/docs/CSS/position /ja/docs/Web/CSS/position /ja/docs/CSS/position_value /ja/docs/Web/CSS/position_value /ja/docs/CSS/quotes /ja/docs/Web/CSS/quotes -/ja/docs/CSS/radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() -/ja/docs/CSS/repeating-linear-gradient /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() -/ja/docs/CSS/repeating-radial-gradient /ja/docs/orphaned/Web/CSS/repeating-radial-gradient() +/ja/docs/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() +/ja/docs/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient() +/ja/docs/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient() /ja/docs/CSS/resize /ja/docs/Web/CSS/resize /ja/docs/CSS/resolution /ja/docs/Web/CSS/resolution /ja/docs/CSS/right /ja/docs/Web/CSS/right @@ -3705,8 +3705,8 @@ /ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model /ja/docs/Web/CSS/calc /ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/clamp() -/ja/docs/Web/CSS/conic-gradient /ja/docs/orphaned/Web/CSS/conic-gradient() -/ja/docs/Web/CSS/conic-gradient() /ja/docs/orphaned/Web/CSS/conic-gradient() +/ja/docs/Web/CSS/conic-gradient /ja/docs/Web/CSS/gradient/conic-gradient() +/ja/docs/Web/CSS/conic-gradient() /ja/docs/Web/CSS/gradient/conic-gradient() /ja/docs/Web/CSS/counter /ja/docs/Web/CSS/counter() /ja/docs/Web/CSS/counters /ja/docs/Web/CSS/counters() /ja/docs/Web/CSS/counters1 /ja/docs/Web/CSS/counters() @@ -3728,8 +3728,8 @@ /ja/docs/Web/CSS/grid-row-gap /ja/docs/Web/CSS/row-gap /ja/docs/Web/CSS/image-set /ja/docs/Web/CSS/image/image-set() /ja/docs/Web/CSS/image-set() /ja/docs/Web/CSS/image/image-set() -/ja/docs/Web/CSS/linear-gradient /ja/docs/orphaned/Web/CSS/linear-gradient() -/ja/docs/Web/CSS/linear-gradient() /ja/docs/orphaned/Web/CSS/linear-gradient() +/ja/docs/Web/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() +/ja/docs/Web/CSS/linear-gradient() /ja/docs/Web/CSS/gradient/linear-gradient() /ja/docs/Web/CSS/margin-new /ja/docs/Web/CSS/margin /ja/docs/Web/CSS/margin_collapsing /ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing /ja/docs/Web/CSS/max /ja/docs/Web/CSS/max() @@ -3738,13 +3738,13 @@ /ja/docs/Web/CSS/normal /ja/docs/Web/CSS/font-variant /ja/docs/Web/CSS/paint /ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/paint() /ja/docs/Web/CSS/image/paint() -/ja/docs/Web/CSS/radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() -/ja/docs/Web/CSS/radial-gradient() /ja/docs/orphaned/Web/CSS/radial-gradient() +/ja/docs/Web/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() +/ja/docs/Web/CSS/radial-gradient() /ja/docs/Web/CSS/gradient/radial-gradient() /ja/docs/Web/CSS/repeat /ja/docs/Web/CSS/repeat() -/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() -/ja/docs/Web/CSS/repeating-linear-gradient() /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() -/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/orphaned/Web/CSS/repeating-radial-gradient() -/ja/docs/Web/CSS/repeating-radial-gradient() /ja/docs/orphaned/Web/CSS/repeating-radial-gradient() +/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient() +/ja/docs/Web/CSS/repeating-linear-gradient() /ja/docs/Web/CSS/gradient/repeating-linear-gradient() +/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient() +/ja/docs/Web/CSS/repeating-radial-gradient() /ja/docs/Web/CSS/gradient/repeating-radial-gradient() /ja/docs/Web/CSS/single-transition-timing-function /ja/docs/Web/CSS/easing-function /ja/docs/Web/CSS/timing-function /ja/docs/Web/CSS/easing-function /ja/docs/Web/CSS/transform-function/matrix /ja/docs/Web/CSS/transform-function/matrix() diff --git a/files/ja/orphaned/web/css/conic-gradient()/index.html b/files/ja/orphaned/web/css/conic-gradient()/index.html deleted file mode 100644 index d030c33b9d..0000000000 --- a/files/ja/orphaned/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: conic-gradient() -slug: orphaned/Web/CSS/conic-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/conic-gradient() -original_slug: 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>{{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/orphaned/web/css/linear-gradient()/index.html b/files/ja/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index a5659d4660..0000000000 --- a/files/ja/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: linear-gradient() -slug: orphaned/Web/CSS/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - Web - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/linear-gradient() -original_slug: 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>{{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/orphaned/web/css/radial-gradient()/index.html b/files/ja/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index c2caff4bc1..0000000000 --- a/files/ja/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() -original_slug: 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>{{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/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 0a7f158327..0000000000 --- a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: orphaned/Web/CSS/repeating-linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: 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>{{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/orphaned/web/css/repeating-radial-gradient()/index.html b/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index a28cc76903..0000000000 --- a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -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>{{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> diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md new file mode 100644 index 0000000000..7372d1f6bb --- /dev/null +++ b/files/ja/web/css/gradient/conic-gradient()/index.md @@ -0,0 +1,243 @@ +--- +title: conic-gradient() +slug: Web/CSS/gradient/conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.conic-gradient +translation_of: Web/CSS/gradient/conic-gradient() +original_slug: Web/CSS/conic-gradient() +--- +{{CSSRef}} + +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} + +## 構文 + +```css +/* 45度回転した扇形グラデーション、 + 青で始まり赤で終わる */ +conic-gradient(from 45deg, blue, red); + +/* 青みがかった紫のボックス。グラデーションは青から赤へと + 進みます。しかし、扇形グラデーションの中心が左上にある + ため、右下の四分の一しか見えません。 */ +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%) +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 + +### 扇型グラデーションの構成 + +<p>扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> + + + +扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 + +放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 + +グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 + +```css +conic-gradient(red, orange, yellow, green, blue); +conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 + +```css +conic-gradient(red 40grad, 80grad, blue 360grad); +``` + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 + +```css +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); +``` + +色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 + +```css +conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); +``` + +扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 + +```css +conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); +background-size: 25% 25%; +``` + +そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Gradient_at_40-degrees">40 度のグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + conic-gradient(from 40deg, #fff, #000); +} +``` + +{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} + +<h3 id="Gradient_pie-chart">グラデーションの円グラフ</h3> + +This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: conic-gradient( + red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50% +} +``` + +{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} + +<h3 id="Checkerboard">市松模様</h3> + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +<div></div> +``` + +```css +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; +} +``` + +{{EmbedLiveSample("Checkerboard", 120, 120)}} + +### その他の conic-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} 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> diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md new file mode 100644 index 0000000000..5123beb559 --- /dev/null +++ b/files/ja/web/css/gradient/index.md @@ -0,0 +1,163 @@ +--- +title: <gradient> +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Data Type + - Graphics + - Layout + - Reference +browser-compat: css.types.image.gradient +translation_of: Web/CSS/gradient +--- +{{CSSRef}} + +The **`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 + +{{EmbedInteractiveExample("pages/css/type-gradient.html")}} + +CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然または推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。 + +## 構文 + +`<gradient>` データ型は、以下のリストにある関数型のうちの一つによって定義します。 + +#### 線形グラデーション + +線形グラデーション (linear gradient) は、色が仮想の直線に沿って変化します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数で生成されます。 + +#### 放射グラデーション + +放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 + +#### 反復グラデーション + +反復グラデーション (repeating gradient) は、要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} および {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数で生成されます。 + +#### 扇形グラデーション + +扇形グラデーション (conic gradient) は、色が円を描くように連続的に変化します。 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数で生成されます。 + +## 補間 + +色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 [transparent キーワード](/ja/docs/Web/CSS/color_value#transparent_keyword)を使用するとこれを使用しないことがあるので注意してください。) + +## 例 + +<h3 id="Linear_gradient_example">線形グラデーションの例</h3> + +単純な線形グラデーションです。 + +```html hidden +<div class="linear-gradient">Linear gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-gradient { + background: linear-gradient(to right, + red, orange, yellow, green, blue, indigo, violet); +} +``` + +{{EmbedLiveSample('Linear_gradient_example', 240, 120)}} + +<h3 id="Radial_gradient_example">放射グラデーションの例</h3> + +単純な放射グラデーションです。 + +```html hidden +<div class="radial-gradient">Radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +``` + +{{EmbedLiveSample('Radial_gradient_example', 240, 120)}} + +<h3 id="Repeating_gradient_examples">反復グラデーションの例</h3> + +単純な線形および放射の反復グラデーションの例です。 + +```html hidden +<div class="linear-repeat">Repeating linear gradient</div> +<br> +<div class="radial-repeat">Repeating radial gradient</div> +``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.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); +} +``` + +{{EmbedLiveSample('Repeating_gradient_examples', 240, 220)}} + +<h3 id="Conic_gradient_example">扇形グラデーションの例</h3> + +単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。 + +```html hidden +<div class="conic-gradient">Conic gradient</div> +``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +``` + +{{EmbedLiveSample('Conic_gradient_example', 240, 240)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- [CSS の基本データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS の単位と値](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 入門: 値と単位](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md new file mode 100644 index 0000000000..963db61405 --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/index.md @@ -0,0 +1,198 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 構文 + +```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%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{CSSxRef("<angle>")}} + - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。</dd> +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。</dd> +- `<color-hint>` + - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 +> +> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 + +## 解説 + +他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 + +### 線形グラデーションの構成 + +線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 + + + +グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 + +開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 + +#### グラデーションのカスタマイズ + +グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 + +色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 + +```css +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%); +``` + +既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 + +## 例 + +<h3 id="Gradient_at_a_45-degree_angle">45 度 のグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} + +<h3 id="Gradient_that_starts_at_60_of_the_gradient_line">グラデーション軸の 60% から始まるグラデーション</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} + +<h3 id="Gradient_with_multi-position_color_stops">複数の位置の色経由点があるグラデーション</h3> + +この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}} + +<h3 id="More_linear-gradient_examples">その他のグラデーションの例</h3> + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png Binary files differnew file mode 100644 index 0000000000..240da5855e --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient()/linear-gradient.png diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md new file mode 100644 index 0000000000..127f5f85ac --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/index.md @@ -0,0 +1,143 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +{{CSSRef}} + +**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 + +{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} + +## 構文 + +```css +/* コンテナーの中央にあるグラデーション、 + 赤で始まり、青へ変わり、緑で終わる */ +radial-gradient(circle at center, red 0, blue, green 100%) +``` + +放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 + +## 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<ending-shape>` + - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<size>` + + - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 + + グラデーションが円でも楕円でも `<size>` に以下のキーワードを使用することができます。 + + | キーワード | 説明 | + | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | + | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + `<ending-shape>` を `circle` と指定した場合、大きさを明示的に [`<length>`](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 + + `<ending-shape>` を `ellipse` と指定するか省略した場合、大きさを二つの [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 + +- `<linear-color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +## 解説 + +<p>他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 + +繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +### 放射グラデーションの構成 + +放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 + +滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 + +色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 + +## 例 + +<h3 id="Simple_gradient">シンプルなグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} +``` + +{{EmbedLiveSample('Simple_gradient', 120, 120)}} + +<h3 id="Non-centered_gradient">中央から外れたグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +} +``` + +{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} + +### 他の radial-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png Binary files differnew file mode 100644 index 0000000000..f16dc4e5da --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient()/radial_gradient.png diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md new file mode 100644 index 0000000000..f9780d9829 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md @@ -0,0 +1,177 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/gradient/repeating-conic-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +browser-compat: css.types.image.gradient.repeating-conic-gradient +translation_of: Web/CSS/gradient/repeating-conic-gradient() +--- +{{CSSRef}} + +**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 + +## 構文 + +```css +/* スターバースト: 青の上に青のスターブラスト: + このグラデーションは左上 4 分の 1 の位置を中心とした + 明るい青と暗い青のスターブラストで、 3 度傾いている + ため垂直線がありません。 */ +background: repeating-conic-gradient( + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg); +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `<position>` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `<angular-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 +- `<color-hint>` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 + +最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `<image>` の寸法に一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。</p> + +> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 + +### 反復扇形グラデーションの理解 + +repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 + + + +上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 + + repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); + + repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); + + conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); + + radial-gradient(red 33%, yellow 33% 66%, blue 66%); + +反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 + +繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from <angle>` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 + +繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 + +放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 + +グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 + +```css +repeating-conic-gradient(red, orange, yellow, green, blue 50%); +repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 + +異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +<h3 id="Black_and_white_starburst">白黒のスターブラスト</h3> + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background-image: + repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); +} +``` + +{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} + +<h3 id="Off-centered_gradient">中心をずらしたグラデーション</h3> + +このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +<div></div> +``` + +```css +div { + background: repeating-conic-gradient( + from 3deg at 25% 25%, + green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} + +### その他の repeating-conic-gradient の例 + +それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md new file mode 100644 index 0000000000..de9a11c8ab --- /dev/null +++ b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md @@ -0,0 +1,149 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-linear-gradient +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +{{CSSRef}} + +**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 + +他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は CSS の `<image>` データ型に所属しますので、 `<image>` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 + +## 構文 + +```css +/* 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%); +``` + +### 値 + +- `<side-or-corner>` + + - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{cssxref("<angle>")}} + - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `<linear-color-stop>` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 +- `<color-hint>` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +### 形式文法 + +```css +repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) + \---------------------------------/ \---------------/ + グラデーション線の定義 色経由点のリスト + +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> ] +``` + +## 例 + +<h3 id="Zebra_stripes">縞模様</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +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); +} +``` + +{{EmbedLiveSample('Zebra_stripes', 120, 120)}} + +<h3 id="Ten_repeating_horizontal_bars">10 回繰り返す水平線</h3> + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(to bottom, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} +``` + +{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} + +最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md new file mode 100644 index 0000000000..8142f54a54 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md @@ -0,0 +1,152 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +browser-compat: css.types.image.gradient.repeating-radial-gradient +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/repeating-radial-gradient() +--- +{{CSSRef}} + +**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} + +それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 + +他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`<gradient>` は `<image>` データ型に属するため、 `<image>` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 + +## 構文 + +```css +/* コンテナーの中央からのグラデーションで、 + 赤で始まり、青に変化し、緑で終わり、 + それぞれ 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%); +``` + +### 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `<shape>` + - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `<extent-keyword>` + + - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + | キーワード | 説明 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | + | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 + +- `<color-stop>` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 + +### 形式文法 + +```css +repeating-radial-gradient( + [[ circle || <length> ] [at <position>]? , | + [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | + [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | + at <position> , <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> ] +``` + +## 例 + +<h3 id="Black_and_white_gradient">白と黒のグラデーション</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +``` + +{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} + +<h3 id="Farthest-corner">最も遠い角</h3> + +```html hidden +<div class="radial-gradient"></div> +``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.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%); +} +``` + +{{EmbedLiveSample('Farthest-corner', 120, 120)}} + +楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} |
/linear-gradient.png?h=dependabot/github_actions/actions/cache-2.1.7&id=d0d201b4f93ee8eb32e38fb35684031384cfffd8){kind=link}
/radial_gradient.png?h=dependabot/github_actions/actions/cache-2.1.7&id=d0d201b4f93ee8eb32e38fb35684031384cfffd8){kind=link}