CSS 座標変換関数のリファレンスを更新

- 2021/11/21 時点の英語版に同期

1 files changed, 150 insertions, 96 deletions

diff --git a/files/ja/web/css/transform-function/scale()/index.md b/files/ja/web/css/transform-function/scale()/index.md
index e4b78176ec..f81c5606b2 100644
--- a/files/ja/web/css/transform-function/scale()/index.md
+++ b/files/ja/web/css/transform-function/scale()/index.md
@@ -3,75 +3,156 @@ title: scale()
 slug: Web/CSS/transform-function/scale()
 tags:
   - CSS
-  - CSS 変形
   - CSS 関数
-  - Reference
+  - CSS 座標変換
+  - 関数
+  - リファレンス
+browser-compat: css.types.transform-function.scale
 translation_of: Web/CSS/transform-function/scale()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>scale()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>
+**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。
 
-<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+![](scale.png)
 
-<p>この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は<a href="https://en.wikipedia.org/wiki/Homothetic_transformation"> 相似変換</a> を定義します)。</p>
+この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。
 
-<p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p>
+座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。
 
-<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/ja/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div>
+> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`](</ja/docs/Web/CSS/transform-function/scale3d()>) 関数を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>scale()</code> 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。</p>
+`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。
 
-<pre class="syntaxbox notranslate">scale(<var>sx</var>)
+```css
+scale(sx)
 
-scale(<var>sx</var>, <var>sy</var>)
-</pre>
+scale(sx, sy)
+```
 
-<h3 id="Value" name="Value">値</h3>
+### 値
 
-<dl>
- <dt><code><var>sx</var></code></dt>
- <dd>変倍ベクトルの横座標を表す {{cssxref("&lt;number&gt;")}}。</dd>
- <dt><code><var>sy</var></code></dt>
- <dd>変倍ベクトルの縦座標を表す {{cssxref("&lt;number&gt;")}}。定義されない場合、これのデフォルト値は <code><var>sx</var></code> であり、要素の形を保つ一様な変倍となります。</dd>
-</dl>
+- `sx`
+  - : 変倍ベクトルの横座標を表す {{cssxref("&lt;number&gt;")}}。
+- `sy`
+  - : 変倍ベクトルの縦座標を表す {{cssxref("&lt;number&gt;")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">ℝ<sup>2</sup> 上のデカルト座標</th>
-   <th scope="col">ℝℙ<sup>2</sup> 上の同次座標</th>
-   <th scope="col">ℝ<sup>3</sup> 上のデカルト座標</th>
-   <th scope="col">ℝℙ<sup>3</sup> 上の同次座標</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
-   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
-  </tr>
-  <tr>
-   <td><code>[sx 0 0 sy 0 0]</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">ℝ^2 上のデカルト座標</th>
+      <th scope="col">ℝℙ^2 上の同次座標</th>
+      <th scope="col">ℝ^3 上のデカルト座標</th>
+      <th scope="col">ℝℙ^3 上の同次座標</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td>
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+      <td rowspan="2">
+        <math
+          ><mfenced
+            ><mtable
+              ><mtr
+                ><mtd><mi>sx</mi> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mi>sy</mi> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ></mfenced
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>[sx 0 0 sy 0 0]</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Examples" name="Examples">例</h2>
+## アクセシビリティの考慮
 
-<h3 id="Scaling_the_X_and_Y_dimensions_together" name="Scaling_the_X_and_Y_dimensions_together">X と Y の大きさを一緒に変倍する</h3>
+拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。
 
-<h4 id="HTML">HTML</h4>
+また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。
 
-<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+詳しくは以下の文書を参照してください。
 
-<h4 id="CSS">CSS</h4>
+- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions)
+- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions)
 
-<pre class="brush: css notranslate">div {
+## 例
+
+<h3 id="Scaling_the_X_and_Y_dimensions_together">X と Y の大きさを一緒に変倍する</h3>
+
+#### HTML
+
+```html
+<div>Normal</div>
+<div class="scaled">Scaled</div>
+```
+
+#### CSS
+
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -81,22 +162,25 @@ scale(<var>sx</var>, <var>sy</var>)
   transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
   background-color: pink;
 }
-</pre>
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p>
+{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}
 
-<h3 id="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin" name="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin">X と Y の大きさを別々に変倍し、原点を平行移動させる</h3>
+<h3 id="Scaling_X_and_Y_dimensions_separately_and_translating_the_origin">X と Y の大きさを別々に変倍し、原点を平行移動させる</h3>
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
-&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+```html
+<div>Normal</div>
+<div class="scaled">Scaled</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">div {
+```css
+div {
   width: 80px;
   height: 80px;
   background-color: skyblue;
@@ -107,52 +191,22 @@ scale(<var>sx</var>, <var>sy</var>)
   transform-origin: left;
   background-color: pink;
 }
-</pre>
-
-<h4 id="Result_2">Result</h4>
+```
 
-<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p>
+#### 結果
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}
 
-<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p>
+## 仕様書
 
-<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p>
-
-<p>詳しくは以下の文書を参照してください。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li>
- <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</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("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}</td>
-   <td>{{Spec2("CSS3 Transforms")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>互換性の情報は <code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> データ型をご覧ください。</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
- <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li>
-</ul>
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
+- {{cssxref("transform-function/scale3d()", "scale3d()")}}