zoom

非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

CSS の標準外の zoom プロパティは、要素の拡大率を制御するために使用することができます。できれば、このプロパティの代わりに transform: scale() を使用してください。ただし、 CSS 変換とは異なり、 zoom は要素のレイアウト時の大きさに影響します。

/* キーワード値 */
zoom: normal;
zoom: reset;

/* <percentage> 値 */
zoom: 50%;
zoom: 200%;

/* <number> 値 */
zoom: 1.1;
zoom: 0.7;

/* グローバル値 */
zoom: inherit;
zoom: initial;
zoom: unset;
初期値normal
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類integer

構文

normal
要素を通常のサイズでレンダリングします。
reset
ユーザーが非ピンチベースのズームを利用したときは (たとえばキーボードで Ctrl-- または Ctrl++ のショートカット) 要素を拡大しない。 WebKit (とおそらく Blink) のみサポートされています。
<percentage>
ズーム率です。 100%normal は等価です。 100% よりも大きな値はズームイン、 100%よりも小さな値はズームアウトします。
<number>
ズーム率です。対応するパーセンテージ (1.0 = 100% = normal) に相当します。 1.0 よりも大きな値はズームイン、 1.0 よりも小さな値はズームアウトします。

形式文法

normal | reset | <number> | <percentage>

最初の例

HTML

<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

p.small {
  zoom: 75%;
}
p.normal {
  zoom: normal;
}
p.big {
  zoom: 2.5;
}
p {
  display: inline-block;
}
p:hover {
  zoom: reset;
}

結果

2番目の例

HTML

<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

div.circle {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  zoom: 1.5;
}
div#a {
  background-color: gold;
  zoom: normal;
}
div#b {
  background-color: green;
  zoom: 200%;
}
div#c {
  background-color: blue;
  zoom: 2.9;
}

結果

仕様書

このプロパティは標準外であり、 Internet Explorer を起源としています。 Apple は Safari CSS Referenceで説明しています。マイクロソフトの Rossen Atanassov は GitHubに非公式の仕様案を公開しています

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
zoom
非標準
Chrome 完全対応 1Edge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 390936.
IE 完全対応 5.5Opera 完全対応 15Safari 完全対応 3.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 390936.
Opera Android 完全対応 14Safari iOS 完全対応 3Samsung Internet Android 完全対応 1.0
The reset value
非標準
Chrome 未対応 1 — 59Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 15 — 46Safari 完全対応 3.1WebView Android 未対応 ≤37 — 59Chrome Android 未対応 18 — 59Firefox Android 未対応 なしOpera Android 未対応 14 — 43Safari iOS 完全対応 3Samsung Internet Android 未対応 1.0 — 7.0

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報