CSS zoom 属性

定義と使用法

zoom 属性で要素の拡大率を指定します。要素は拡大または縮小できます。

インスタンス

例 1

テキストに使用 zoom 属性：

p.a {
  zoom: normal;
}
p.b {
  zoom: 150%;
}
p.c {
  zoom: 0.6;
}

自分で試してみてください

例 2

を使用して zoom 属性調整要素のサイズ：

div {
  border-radius: 100%;
  background: #73AD21;
  padding: 20px;
  width: 80px;
  height: 80px;
}
div.a {
  zoom: normal;
}
div.b {
  zoom: 150%;
}
div.c {
  zoom: 0.6;
}

自分で試してみてください

CSS 文法

zoom: normal|%|number|unset|initial|inherit;

属性値

値 説明
normal デフォルト値。要素は通常の方法でレンダリングされます。
%

パーセントで拡大率を指定します。

100% = 通常。

大きくするには、100%以上の値を使用します。

小さくするには、100%未満の値を使用します。
number

拡大率を数値で指定します（パーセント）。

1.0 = 通常。

大きくするには、1.0以上の値を使用します。

小さくするには、1.0未満の値を使用します。
unset 拡大率を解除し（通常に戻します）。
initial この属性をデフォルト値に設定します。参照 initial。
inherit 親要素からこの属性を継承します。参照 inherit。

技術的詳細

デフォルト値： normal
継承性： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Viewport Module レベル 1
JavaScript 文法： object.style.zoom = "3"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
1 12 126 3.1 15.0