path: root/files/ja/web/css/transform-function/scale()/index.html

---
title: scale()
slug: Web/CSS/transform-function/scale()
tags:
  - CSS
  - CSS 変形
  - CSS 関数
  - Reference
translation_of: Web/CSS/transform-function/scale()
---
<div>{{CSSRef}}</div>

<p><strong><code>scale()</code></strong> は <a href="/docs/Web/CSS">CSS</a> 関数で、二次元平面上における拡縮する変形を定義します変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("&lt;transform-function&gt;")}} データ型になります。</p>

<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>

<p>この変形は、二次元ベクトルによって特徴づけられます。座標でどれほどの変倍が各方向において行われるのかを定義します。両方の座標が等しい場合、変倍は一様 (つまり等方的) で、要素の形が保たれます (変倍関数は<a href="https://en.wikipedia.org/wiki/Homothetic_transformation"> 相似変換</a> を定義します)。</p>

<p>座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は <a href="https://ja.wikipedia.org/wiki/点対称">点対称化</a> と大きさの変更を行います。1 と等しい場合、変倍は何もしません。</p>

<div class="note"><strong>メモ:</strong> <code>scale()</code> 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 <code><a href="/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> 関数を使用してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<p><code>scale()</code> 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。</p>

<pre class="syntaxbox notranslate">scale(<var>sx</var>)

scale(<var>sx</var>, <var>sy</var>)
</pre>

<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>

<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>
</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>

<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>

<pre class="brush: css notranslate">div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  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>

<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>

<h4 id="HTML_2">HTML</h4>

<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_2">CSS</h4>

<pre class="brush: css notranslate">div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
  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>

<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>

<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>

<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>