CSS 画像の文書を更新

- 2021/10/16 時点の英語版に同期

3 files changed, 511 insertions, 477 deletions

diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
index acef249aad..267326417c 100644
--- a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
+++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md
@@ -2,55 +2,57 @@
 title: CSS での画像スプライトの実装
 slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
 tags:
-  - Advanced
+  - 上級者
   - CSS
-  - CSS Images
-  - Graphics
-  - Guide
+  - CSS 画像
+  - グラフィック
+  - ガイド
   - NeedsContent
-  - Sprites
-  - Web
+  - スプライト
+  - ウェブ
 translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
 ---
-<p>{{cssRef}}</p>
+{{CSSRef}}
 
-<p><strong>画像スプライト</strong>は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。</p>
+**画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1 枚の画像として送信した方が、メモリーや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。
 
-<div class="note">
-<p><strong>注:</strong> HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。</p>
-</div>
+> **Note:** HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。
 
-<h2 id="Implementation" name="Implementation">実装</h2>
+## 実装
 
-<p>例えば、 <code>toolbtn</code> クラスを持つすべてのアイテムに画像が与えられるとします。</p>
+例えば、 `toolbtn` クラスを持つすべてのアイテムに画像が与えられたとします。
 
-<pre class="brush:css notranslate">.toolbtn {
+```css
+.toolbtn {
   background: url(myfile.png);
   display: inline-block;
   height: 20px;
   width: 20px;
-}</pre>
+}
+```
 
-<p>背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。</p>
+背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の 2 つの値として、または {{cssxref("background-position")}} として追加できます。
 
-<pre class="brush:css notranslate">#btn1 {
+```css
+#btn1 {
   background-position: -20px 0px;
 }
 
 #btn2 {
   background-position: -40px 0px;
-}</pre>
+}
+```
 
-<p>これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には <code>toolbtn</code> クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。</p>
+これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には `toolbtn` クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。
 
-<p>同様に、ホバー状態にすることもできます。</p>
+同様に、ホバー状態にすることもできます。
 
-<pre class="brush:css notranslate">#btn:hover {
-  background-position: <var>&lt;右方向へずらすピクセル数&gt;</var>px <var>&lt;下方向へずらすピクセル数&gt;</var>px;
-}</pre>
+```css
+#btn:hover {
+  background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px;
+}
+```
 
-<h2 id="See_also" name="See_also">関連記事</h2>
+## 関連記事
 
-<ul>
- <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li>
-</ul>
+- [Full working demo at CSS Tricks](https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/)
diff --git a/files/ja/web/css/css_images/index.md b/files/ja/web/css/css_images/index.md
index a55ff99d7d..1b2f8d66e4 100644
--- a/files/ja/web/css/css_images/index.md
+++ b/files/ja/web/css/css_images/index.md
@@ -4,103 +4,57 @@ slug: Web/CSS/CSS_Images
 tags:
   - CSS
   - CSS 画像
-  - Reference
+  - ガイド
   - 概要
+  - Reference
 translation_of: Web/CSS/CSS_Images
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p class="summary"><ruby><strong>CSS 画像</strong><rp> (</rp><rt>CSS Images</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。</p>
+**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("&lt;image&gt;")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。
 
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
 
-<h3 id="Properties" name="Properties">プロパティ</h3>
+### プロパティ
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("image-orientation")}}</li>
- <li>{{CSSxRef("image-rendering")}}</li>
- <li>{{CSSxRef("image-resolution")}}</li>
- <li>{{CSSxRef("object-fit")}}</li>
- <li>{{CSSxRef("object-position")}}</li>
-</ul>
-</div>
+- {{CSSxRef("image-orientation")}}
+- {{CSSxRef("image-rendering")}}
+- {{CSSxRef("image-resolution")}}
+- {{CSSxRef("object-fit")}}
+- {{CSSxRef("object-position")}}
 
-<h3 id="Functions" name="Functions">関数</h3>
+### 関数
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
- <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
- <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
- <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
- <li>{{CSSxRef("conic-gradient")}}</li>
- <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
- <li>{{CSSxRef("url", "url()")}}</li>
- <li>{{CSSxRef("element", "element()")}}</li>
- <li>{{CSSxRef("_image", "image()")}}</li>
- <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
-</ul>
-</div>
+- {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}}
+- {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}}
+- {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}
+- {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}
+- {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}
+- {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- {{CSSxRef("url()", "url()")}}
+- {{CSSxRef("element()", "element()")}}
+- {{CSSxRef("image/image()", "image()")}}
+- {{CSSxRef("cross-fade()", "cross-fade()")}}
 
-<h3 id="Data_types" name="Data_types">データ型</h3>
+### データ型
 
-<div class="index">
-<ul>
- <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
- <li>{{CSSxRef("&lt;image&gt;")}}</li>
-</ul>
-</div>
+- {{CSSxRef("&lt;gradient&gt;")}}
+- {{CSSxRef("&lt;image&gt;")}}
 
-<h2 id="Guides" name="Guides">ガイド</h2>
+## ガイド
 
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></dt>
- <dd>特殊な CSS 画像型である<em>グラデーション</em>と、その作り方や使い方を紹介します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS での画像スプライトの実装</a></dt>
- <dd>単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。</dd>
-</dl>
+- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+  - : 特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。
+- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+  - : 単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。
 
-<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")}}</td>
-   <td>{{Spec2("CSS4 Images")}}</td>
-   <td>{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Images")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
-   <td>{{Spec2("Compat")}}</td>
-   <td><code>-webkit</code> の接頭辞が付いたグラデーション値の関数を標準化</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS3 Values")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+| 仕様書                                                           | 状態                     | 備考                                                                                                                               |
+| ---------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("CSS4 Images")}}                                      | {{Spec2("CSS4 Images")}} | {{CSSxRef("image-resolution")}}, {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("image/image()", "image()")}} を追加                            |
+| {{SpecName("CSS3 Images")}}                                      | {{Spec2("CSS3 Images")}} | {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加 |
+| {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}}      | `-webkit` の接頭辞が付いたグラデーション値の関数を標準化                                                                           |
+| {{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}              | {{Spec2("CSS3 Values")}} |                                                                                                                                    |
+| {{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}        | {{Spec2("CSS2.1")}}      |                                                                                                                                    |
+| {{SpecName("CSS1", "#url", "&lt;url&gt;")}}                      | {{Spec2("CSS1")}}        | 初回定義                                                                                                                           |
diff --git a/files/ja/web/css/css_images/using_css_gradients/index.md b/files/ja/web/css/css_images/using_css_gradients/index.md
index bb810f605e..4c784dafd7 100644
--- a/files/ja/web/css/css_images/using_css_gradients/index.md
+++ b/files/ja/web/css/css_images/using_css_gradients/index.md
@@ -2,233 +2,242 @@
 title: CSS グラデーションの使用
 slug: Web/CSS/CSS_Images/Using_CSS_gradients
 tags:
-  - Advanced
+  - 上級者
   - CSS
-  - CSS Images
-  - Example
-  - Gradients
-  - Guide
-  - Web
+  - CSS 画像
+  - 例
+  - グラデーション
+  - ガイド
+  - ウェブ
 translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong>CSS グラデーション</strong>は {{cssxref("&lt;gradient&gt;")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("&lt;image&gt;")}} の特殊型です。グラデーションは3種類から選択することができます。<ruby>線形<rp> (</rp><rt>linear</rt><rp>)</rp></ruby> ({{cssxref("linear-gradient")}} 関数によって生成)、<ruby>放射<rp> (</rp><rt>radial</rt><rp>)</rp></ruby> ({{cssxref("radial-gradient")}} 関数によって生成)、<ruby>扇形<rp> (</rp><rt>conic</rt><rp>)</rp></ruby> ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。</p>
+**CSS グラデーション**は {{cssxref("&lt;gradient&gt;")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("&lt;image&gt;")}} の特殊型です。グラデーションは3種類から選択することができます。線形 (_linear_) ({{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数によって生成)、放射 (_radial_) ({{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数によって生成)、扇形 (_conic_) ({{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数によって生成) の3種類です。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} の各関数によって、反復グラデーションを生成することもできます。
 
-<p>グラデーションは、例えば背景など、 <code>&lt;image&gt;</code> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。</p>
+グラデーションは、例えば背景など、`<image>` が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。
 
-<p>最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。</p>
+最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。
 
-<h2 id="Using_linear_gradients" name="Using_linear_gradients">線形グラデーションの使用</h2>
+## 線形グラデーションの使用
 
-<p>線形グラデーションは、直線に沿った色の帯の変化を生成します。</p>
+線形グラデーションは、直線に沿った色の帯の変化を生成します。
 
-<div>
-<h3 id="A_basic_linear_gradient" name="A_basic_linear_gradient">基本的な線形グラデーション</h3>
+<h3 id="A_basic_linear_gradient">基本的な線形グラデーション</h3>
 
-<p>グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは<ruby>色経由点<rp> (</rp><rt>color stops</rt><rp>) </rp></ruby>と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。</p>
+グラデーションの最も基本的な形を作成するために必要なことは、2 つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも 2 つ必要ですが、必要なだけの数を設定することができます。
 
-<div class="hidden">
-<pre class="brush: html notranslate" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="simple-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.simple-linear {
+```css
+.simple-linear {
   background: linear-gradient(blue, pink);
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}
 
-<div>
-<h3 id="Changing_the_direction" name="Changing_the_direction">方向の変更</h3>
+<h3 id="Changing_the_direction">方向の変更</h3>
 
-<p>既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。</p>
+既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="horizontal-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.horizontal-gradient {
+```css
+.horizontal-gradient {
   background: linear-gradient(to right, blue, pink);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}
 
-<div>
-<h3 id="Diagonal_gradients" name="Diagonal_gradients">対角グラデーション</h3>
+<h3 id="Diagonal_gradients">対角グラデーション</h3>
 
-<p>グラデーションを角から角へ、対角に作成することもできます。</p>
+グラデーションを角から角へ、対角に作成することもできます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="diagonal-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 200px;
   height: 100px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.diagonal-gradient {
+```css
+.diagonal-gradient {
   background: linear-gradient(to bottom right, blue, pink);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p>
-</div>
+{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}
 
-<div>
-<h3 id="Using_angles" name="Using_angles">角度の指定</h3>
+<h3 id="Using_angles">角度の指定</h3>
 
-<p>方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。</p>
+方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="angled-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.angled-gradient {
+```css
+.angled-gradient {
   background: linear-gradient(70deg, blue, pink);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p>
+{{ EmbedLiveSample('Using_angles', 120, 120) }}
 
-<p>角度を指定した場合、 <code>0deg</code> は下から上への垂直グラデーションを生成し、 <code>90deg</code> は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。</p>
+角度を指定した場合、 `0deg` は下から上への垂直グラデーションを生成し、 `90deg` は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。
 
-<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
-</div>
+![](linear_red_angles.png)
 
-<h2 id="Declaring_colors_creating_effects" name="Declaring_colors_creating_effects">色の宣言と効果の生成</h2>
+<h2 id="Declaring_colors_creating_effects">色の宣言と効果の生成</h2>
 
-<p>すべての<span class="js-about-item-abstr">CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。</span></p>
+すべての CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、2 つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。
 
-<div>
-<h3 id="Using_more_than_two_colors" name="Using_more_than_two_colors">3つ以上の色の使用</h3>
+<h3 id="Using_more_than_two_colors">3 つ以上の色の使用</h3>
 
-<p>2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。</p>
+2 つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="auto-spaced-linear-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.auto-spaced-linear-gradient {
+```css
+.auto-spaced-linear-gradient {
   background: linear-gradient(red, yellow, blue, orange);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}
 
-<div>
-<h3 id="Positioning_color_stops" name="Positioning_color_stops">色経由点の配置</h3>
+<h3 id="Positioning_color_stops">色経由点の配置</h3>
 
-<p>色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 <code>0%</code> が開始点を示し、 <code>100%</code> が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は <code>0%</code> に、最後の色経由点は <code>100%</code> になり、他の色経由点は隣の色経由点の間の中間点になります。</p>
+色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 `0%` が開始点を示し、 `100%` が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は `0%` に、最後の色経由点は `100%` になり、他の色経由点は隣の色経由点の間の中間点になります。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multicolor-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.multicolor-linear {
+```css
+.multicolor-linear {
    background: linear-gradient(to left, lime 28px, red 77%, cyan);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}
 
-<div>
-<h3 id="Creating_hard_lines" name="Creating_hard_lines">不連続線の生成</h3>
+<h3 id="Creating_hard_lines">不連続線の生成</h3>
 
-<p>2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である <code>50%</code> の色経由点を共有しています。</p>
+2 つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、2 つの色がグラデーションの中心である `50%` の色経由点を共有しています。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="striped"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="striped"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.striped {
+```css
+.striped {
    background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}
 
-<div>
-<h3 id="Gradient_hints" name="Gradient_hints">グラデーションのヒント</h3>
+<h3 id="Gradient_hints">グラデーションのヒント</h3>
 
-<p>既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。</p>
+既定では、グラデーションは 1 つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中心点をグラデーションの特定の位置に移動することができます。この例では、変化の中心点を 50% の位置から 10% の位置へ移動します。
 
-<div class="hidden">
-<pre class="brush: html notranslate" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
-&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="color-hint"></div>
+<div class="simple-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px; float: left; margin-right: 10px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.color-hint {
+```css
+.color-hint {
   background: linear-gradient(blue, 10%, pink);
 }
 .simple-linear {
   background: linear-gradient(blue, pink);
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Gradient_hints', 120, 120) }}
 
-<div>
-<h3 id="Creating_color_bands_stripes" name="Creating_color_bands_stripes">色の帯と縞の生成</h3>
+<h3 id="Creating_color_bands_stripes">色の帯と縞の生成</h3>
 
-<p>グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。</p>
+グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に 2 つの位置を含めます。色経由点には 2 つの位置を設定することができ、これは、異なる位置に同じ色を持つ 2 つの連続した色経由点に相当します。色は、第 1 の色経由点で完全な彩度に達し、第 2 の色経由点までその彩度を維持し、隣接する色経由点の第 1 の位置を介して隣接する色経由点の色に遷移します。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
-&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multiposition-stops"></div>
+<div class="multiposition-stop2"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
   float: left; margin-right: 10px; box-sizing: border-box;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.multiposition-stops {
+```css
+.multiposition-stops {
    background: linear-gradient(to left,
        lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
    background: linear-gradient(to left,
@@ -240,243 +249,307 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
    background: linear-gradient(to left,
       lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p>
+{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}
 
-<p>上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。</p>
+上記の第 1 の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。
 
-<p>第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。</p>
+第 2 の例では、各色の 2 番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。
 
-<p>いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。</p>
-</div>
+いずれの例でも、グラデーションは2回書かれます。第 1 の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第 2 の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが 2 つずつ含まれています。
 
-<div>
-<h3 id="Controlling_the_progression_of_a_gradient" name="Controlling_the_progression_of_a_gradient">グラデーションの進行の制御</h3>
+<h3 id="Controlling_the_progression_of_a_gradient">グラデーションの進行の制御</h3>
 
-<p>既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。</p>
+既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、50% の割合ではなく、20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+```html hidden
+<div class="colorhint-gradient"></div> <div class="regular-progression"></div>
+```
 
-</pre>
-
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
   float: left; margin-right: 10px; box-sizing: border-box;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.colorhint-gradient {
+```css
+.colorhint-gradient {
   background: linear-gradient(to top, black, 20%, cyan);
 }
 .regular-progression {
   background: linear-gradient(to top, black, cyan);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}
 
-<h3 id="Overlaying_gradients" name="Overlaying_gradients">グラデーションの重ね合わせ</h3>
+<h3 id="Overlaying_gradients">グラデーションの重ね合わせ</h3>
 
-<p>グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。</p>
+グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="layered-image"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="layered-image"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 300px;
   height: 150px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.layered-image {
+```css
+.layered-image {
   background: linear-gradient(to right, transparent, mistyrose),
-      url("https://mdn.mozillademos.org/files/15525/critters.png");
+      url("critters.png");
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p>
+{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}
 
-<h3 id="Stacked_gradients" name="Stacked_gradients">グラデーションの積み重ね</h3>
+<h3 id="Stacked_gradients">グラデーションの重ね合わせ</h3>
 
-<p>グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。</p>
+グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="stacked-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.stacked-linear {
+```css
+.stacked-linear {
   background:
       linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
       linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
       linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p>
+{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}
 
-<h2 id="Using_radial_gradients" name="Using_radial_gradients">放射グラデーションの使用</h2>
+<h2 id="Using_radial_gradients">放射グラデーションの使用</h2>
 
-<p>放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。</p>
+放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。
 
-<h3 id="A_basic_radial_gradient" name="A_basic_radial_gradient">基本的な放射グラデーション</h3>
+<h3 id="A_basic_radial_gradient">基本的な放射グラデーション</h3>
 
-<p>線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。</p>
+線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="simple-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="simple-radial"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 240px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.simple-radial {
+```css
+.simple-radial {
   background: radial-gradient(red, blue);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p>
+{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}
 
-<h3 id="Positioning_radial_color_stops" name="Positioning_radial_color_stops">放射色経由点の配置</h3>
+<h3 id="Positioning_radial_color_stops">放射色経由点の配置</h3>
 
-<p>ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。</p>
+ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p>
+{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}
 
-<h3 id="Positioning_the_center_of_the_gradient" name="Positioning_the_center_of_the_gradient">グラデーションの中心の配置</h3>
+<h3 id="Positioning_the_center_of_the_gradient">グラデーションの中心の配置</h3>
 
-<p>グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。</p>
+グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が 1 つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 240px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.radial-gradient {
+```css
+.radial-gradient {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p>
+{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}
 
-<h3 id="Sizing_radial_gradients" name="Sizing_radial_gradients">放射グラデーションの大きさの変更</h3>
+<h3 id="Sizing_radial_gradients">放射グラデーションの大きさの変更</h3>
 
-<p>線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。</p>
+線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、`closest-corner`, `closest-side`, `farthest-corner`, `farthest-side` があり、`farthest-corner` が既定値です。
 
-<h4 id="Example_closest-side_for_ellipses" name="Example_closest-side_for_ellipses">例: 楕円の closest-side</h4>
+<h4 id="Example_closest-side_for_ellipses">例: 楕円の closest-side</h4>
 
-<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+この例では大きさに `closest-side` の値を使用しています。つまり、開始点 (中心) からボックスを囲む最近接の辺までの距離で大きさが設定されます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-ellipse-side"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 240px;
   height: 100px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.radial-ellipse-side {
+```css
+.radial-ellipse-side {
   background: radial-gradient(ellipse closest-side,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p>
+{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}
 
-<h4 id="Example_farthest-corner_for_ellipses" name="Example_farthest-corner_for_ellipses">例: 楕円の farthest-corner</h4>
+<h4 id="Example_farthest-corner_for_ellipses">例: 楕円の farthest-corner</h4>
 
-<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+この例は、大きさが `farthest-corner` と指定されていることを除けば、前の例と似ています。これは、グラデーションの大きさを、出発点から囲んだボックスの出発点から最も遠い角までの距離で設定するものです。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-ellipse-far"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 240px;
   height: 100px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.radial-ellipse-far {
+```css
+.radial-ellipse-far {
   background: radial-gradient(ellipse farthest-corner at 90% 90%,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p>
+{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}
 
-<h4 id="Example_closest-side_for_circles" name="Example_closest-side_for_circles">例: 縁の closest-side</h4>
+<h4 id="Example_closest-side_for_circles">例: 円の closest-side</h4>
 
-<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p>
+この例では `closest-side` を使用しており、円の大きさが開始点 (中心) と最も近い辺との間の距離になります。円の半径は、グラデーションの中心と最も近い辺との間の距離で、上から 25%、下から 25% の位置関係から、この場合は高さが幅よりも狭いので、最も下に近い位置になります。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="radial-circle-close"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 240px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.radial-circle-close {
+```css
+.radial-circle-close {
   background: radial-gradient(circle closest-side at 25% 75%,
       red, yellow 10%, #1e90ff 50%, beige);
 }
-</pre>
+```
+
+{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}
+
+<h4 id="Example_length_or_percentage_for_ellipses">例: 楕円の長さまたはパーセント値</h4>
+
+楕円のみの場合、長さまたはパーセント値を使って楕円の大きさを決めることができます。最初の値は水平方向の半径、2 番目の値は垂直方向の半径を表し、パーセント値を使用した場合は、その次元でのボックスの大きさに対応します。以下の例では、水平方向の半径にパーセント値を使用しています。
+
+```html hidden
+<div class="radial-ellipse-size"></div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-ellipse-size {
+   background: radial-gradient(ellipse 50% 50px,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+```
+
+{{ EmbedLiveSample('Example_length_or_percentage_for_ellipses', 240, 120) }}
+
+<h4 id="Example_length_for_circles">例: 円の長さ</h4>
+
+円においては大きさを [\<length>](/ja/docs/Web/CSS/length) で指定することができ、これが円の大きさになります。
+
+```html hidden
+<div class="radial-circle-size"></div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-circle-size {
+  background: radial-gradient(circle 50px,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+```
 
-<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p>
+{{ EmbedLiveSample('Example_length_for_circles', 240, 120) }}
 
-<h3 id="Stacked_radial_gradients" name="Stacked_radial_gradients">放射グラデーションの積み重ね</h3>
+<h3 id="Stacked_radial_gradients">放射グラデーションの重ね合わせ</h3>
 
-<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p>
+線形グラデーションのように、放射グラデーションも重ね合わせることができます。最初に指定されたものが最上位に、最後のものが最下位になります。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="stacked-radial"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.stacked-radial {
+```css
+.stacked-radial {
   background:
       radial-gradient(circle at 50% 0,
         rgba(255,0,0,.5),
@@ -489,134 +562,135 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         rgba(0,255,0,0) 70.71%) beige;
   border-radius: 50%;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p>
+{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}
 
-<h2 id="Using_conic_gradients" name="Using_conic_gradients">扇形グラデーションの使用</h2>
+<h2 id="Using_conic_gradients">扇形グラデーションの使用</h2>
 
-<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。</p>
+**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。
 
-<p>扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。</p>
+扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーション線上ではなく、グラデーション弧、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。
 
-<p>In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.</p>
+放射グラデーションでは、楕円の中心から外側に向かって、すべての方向に色が変化していきます。扇形グラデーションでは、円の中心を中心にして、上から時計回りに回転するように色が変化します。放射グラデーションと同様に、グラデーションの中心の位置を決めることができます。線形グラデーションと同様に、グラデーションの角度を変更することができます。
 
-<div>
-<h3 id="A_basic_conic_gradient" name="A_basic_conic_gradient">基本的な扇形グラデーション</h3>
+<h3 id="A_basic_conic_gradient">基本的な扇形グラデーション</h3>
 
-<p>As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:</p>
+線形グラデーションや放射グラデーションと同様に、扇形グラデーションを作成するのに必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置で、グラデーションの開始点は上向きです。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="simple-conic"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="simple-conic"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.simple-conic {
+```css
+.simple-conic {
   background: conic-gradient(red, blue);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}
 
-<div>
-<h3 id="Positioning_the_conic_center" name="Positioning_the_conic_center">扇形の中央の配置</h3>
+<h3 id="Positioning_the_conic_center">扇形の中心の配置</h3>
 
-<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+放射グラデーションのように、扇形グラデーションの中心を配置するには、キーワード、パーセント値、絶対的な長さの何れかをキーワード "at" の後に続けます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="conic-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.conic-gradient {
+```css
+.conic-gradient {
   background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}
 
-<div>
-<h3 id="Changing_the_angle" name="Changing_the_angle">角度の変更</h3>
+<h3 id="Changing_the_angle">角度の変更</h3>
 
-<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+既定では、指定したそれぞれの色経由点は、円の周囲に等間隔に配置されます。扇形グラデーションの開始角度を指定するには、最初に "from" キーワードを使用し、その後に角度または長さを指定します。また、色経由点の位置を指定するには、それらの後に角度または長さを指定します。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="conic-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+```css
+.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}
 
-<h2 id="Using_repeating_gradients" name="Using_repeating_gradients">反復グラデーションの使用</h2>
+<h2 id="Using_repeating_gradients">反復グラデーションの使用</h2>
 
-<p>The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.</p>
+{{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} の各関数は自動的に反復される色経由点に対応していません。しかし、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} の各関数はこの機能を提供することができます。
 
-<p>The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.</p>
+繰り返されるグラデーション線または弧の大きさは、最初の色経由点の位置と最後の色経由点の位置の間の長さです。最初の色経由点が色だけで、色経由点の位置がなかった場合、値は既定で 0 になります。最後の色経由点が色だけで、色経由点の長さがなかった場合、値はデフォルトで100%になります。どちらも宣言されていない場合、グラデーション線は 100% になります。つまり、線形グラデーションと扇形グラデーションの場合は繰り返されず、放射グラデーションの場合は、グラデーションの半径がグラデーションの中心から最も遠い角までの長さよりも小さい場合にのみ繰り返されます。最初の色経由点が宣言されていて、その値が 0 より大きい場合、最初の色経由点と最後の色経由点の差が 100% または 360 度より小さいため、線または円弧の大きさはグラデーションが繰り返されます。
 
-<div>
-<h3 id="Repeating_linear_gradients" name="Repeating_linear_gradients">反復線形グラデーション</h3>
+<h3 id="Repeating_linear_gradients">反復線形グラデーション</h3>
 
-<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p>
+この例では、{{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} を使用して、直線的に繰り返し進行するグラデーションを作成しています。グラデーションが繰り返されることで、色が循環していきます。この例では、グラデーションの線の長さは 10px です。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="repeating-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.repeating-linear {
+```css
+.repeating-linear {
   background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p>
-</div>
+{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}
 
-<div>
-<h3 id="Multiple_repeating_linear_gradients" name="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3>
+<h3 id="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3>
 
-<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/ja/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/ja/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p>
+通常の線形グラデーションや放射グラデーションと同様に、複数のグラデーションを重ねて表示することができます。これは、グラデーションの一部を透明にして、透明部分から後続のグラデーションが見えるようにしたり、各グラデーション画像に異なる [background-size](/ja/docs/Web/CSS/background-size) や、オプションで異なる [background-position](/ja/docs/Web/CSS/background-position) のプロパティ値を含める場合にのみ意味を持ちます。透過性を利用しています。
 
-<p>In this case the gradient lines are 300px, 230px, and 300px long.</p>
+この例では、グラデーション線の長さは 300px、230px、300px です。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multi-repeating-linear"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 600px;
   height: 400px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.multi-repeating-linear {
+```css
+.multi-repeating-linear {
   background:
       repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
         rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
@@ -632,25 +706,27 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         yellow 150px, green 200px, blue 250px,
         indigo 300px, violet 350px, red 370px);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p>
-</div>
+{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}
 
-<h3 id="Plaid_gradient" name="Plaid_gradient">格子縞のグラデーション</h3>
+<h3 id="Plaid_gradient">格子縞のグラデーション</h3>
 
-<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p>
+格子模様を作るために、透明度のあるグラデーションをいくつか重ねています。最初の背景宣言では、すべての色経由点を個別にリストアップしています。2 つ目の背景のプロパティ宣言では、複数の位置にある色経由点の構文を使用しています。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+```html hidden
+<div class="plaid-gradient"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 200px;
   height: 200px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.plaid-gradient {
+```css
+.plaid-gradient {
   background:
       repeating-linear-gradient(90deg, transparent, transparent 50px,
         rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
@@ -687,44 +763,48 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
       repeating-linear-gradient(45deg, transparent 0 5px,
         rgba(143, 77, 63, 0.25) 5px 10px);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p>
+{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}
 
-<h3 id="Repeating_radial_gradients" name="Repeating_radial_gradients">反復放射グラデーション</h3>
+<h3 id="Repeating_radial_gradients">反復放射グラデーション</h3>
 
-<p>この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。</p>
+この例は {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} を使用して、中心点から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="repeating-radial"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 120px;
   height: 120px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.repeating-radial {
+```css
+.repeating-radial {
   background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p>
+{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}
 
-<h3 id="複数の反復放射グラデーション">複数の反復放射グラデーション</h3>
+<h3 id="Multiple_repeating_radial_gradients">複数の反復放射グラデーション</h3>
 
-<div class="hidden">
-<pre class="brush: html notranslate">&lt;div class="multi-target"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<div class="multi-target"></div>
+```
 
-<pre class="brush: css notranslate">div {
+```css hidden
+div {
   width: 250px;
   height: 150px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css notranslate">.multi-target {
+```css
+.multi-target {
   background:
       repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
         rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
@@ -734,17 +814,15 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
         rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
   background-size: 200px 200px, 150px 150px;
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p>
+{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}
 
-<h2 id="See_also" name="See_also">関連記事</h2>
+## 関連記事
 
-<ul>
- <li>グラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
- <li>グラデーション関連の CSS データ型: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
- <li>グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
- <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li>
- <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li>
- <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li>
-</ul>
+- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}
+- グラデーション関連の CSS データ型: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}
+- グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}
+- [CSS Gradients Patterns Gallery, by Lea Verou](https://lea.verou.me/css3patterns/)
+- [CSS3 Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients)
+- [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html)