CSS Reference

scale

縮小や拡大を指定する

scale プロパティは、transform プロパティで使用する、scale() 関数などをプロパティとして独立させたものです。要素を拡大、縮小させることができます。

指定可能な値の定義は下記の通りです。

none | [ <number> | <percentage> ]{1,3}

つまり、下記、いずれかの指定が可能です。

  • none キーワードを単体で指定（等倍のまま）
  • <number>、もしくは <percentage> データ型の値を単体で指定（2D / X軸、Y軸に同じ倍率を指定）。これは transform プロパティで scale() 関数に1つの値を指定した場合と同じです。
  • <number>、もしくは <percentage> データ型の値を、2つ（2D / X軸、Y軸の倍率を個別に指定）、空白で区切って指定。これは transform プロパティで scale() 関数に2つの値を指定した場合と同じです。
  • <number>、もしくは <percentage> データ型の値を、3つ（3D / X軸、Y軸、Z軸の倍率を個別に指定）、空白で区切って指定。これは transform プロパティで scale3d() 関数を使用した場合と同じです。

scaleの仕様

初期値
  • none
対象となる要素
  • 変形可能な要素
継承
  • なし

scaleのサンプルソース

/* none キーワード値 */
scale: none;

/* 1 つの値（2D） */
/* 1 または 100% より大きい値を指定すると要素を拡大 */
scale: 2.5;
/* 1 または 100% より小さい値を指定すると要素を縮小 */
scale: 50%;

/* 2 つの値（2D） */
scale: 2 1;

/* 3 つの値（3D） */
scale: 200% 50% 200%;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome