CSS scale() 関数 - CSS | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

CSS scale() 関数

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

scale() は CSS の関数で、二次元平面上における拡縮する座標変換を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は <transform-function> データ型になります。

試してみましょう

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

この変倍座標変換は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (等方的) で、要素の形が保たれます (これは相似変換です)。

座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は点対称化と大きさの変更を行います。1 と等しい場合、変倍は何もしません。

メモ: scale() 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 scale3d() 関数を使用してください。

構文

css
scale(sx)

scale(sx, sy)

値

変倍ベクトルの横軸（水平、X 成分）を表す <number> または <percentage> です。

sy 省略可

変倍ベクトルの縦軸（垂直、Y 成分）を表す <number> または <percentage> です。定義されていない場合、デフォルト値は sx であり、要素のアスペクト比を保つ一様な変倍となります。

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)

(sx00sy)\left( \begin{array}{cc} sx & 0 \\ 0 & sy \end{array} \right)	(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)	(sx000sy0001)\left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & 1 \end{array} \right)	(sx0000sy0000100001)\left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
	[sx 0 0 sy 0 0]

形式文法

<scale()> =
scale( <number> , <number>? )
この構文は CSS Transforms Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

アクセシビリティ

拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。

また、 prefers-reduced-motion メディア特性を使用することを検討してください。これを使用してメディアクエリーを書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。

詳しくは以下の文書を参照してください。

例

X と Y の大きさを一緒に変倍する

HTML

html
<div>通常</div>
<div class="scaled">変倍</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* scaleX(0.7) scaleY(0.7) と等価 */
  background-color: pink;
}

結果

X と Y の大きさを別々に変倍し、原点を平行移動させる

HTML

html
<div>通常</div>
<div class="scaled">変倍</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(2, 0.5); /* scaleX(2) scaleY(0.5) と等価 */
  transform-origin: left;
  background-color: pink;
}

結果

仕様書

Specification

CSS Transforms Module Level 1
# funcdef-transform-scale

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年5月5日 by MDN contributors.

View this page on GitHub • Report a problem with this content

CSS scale() 関数

In this article

試してみましょう

構文

値

形式文法

アクセシビリティ

例

X と Y の大きさを一緒に変倍する

HTML

CSS

結果

X と Y の大きさを別々に変倍し、原点を平行移動させる

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN