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

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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非標準
Chrome 完全対応 ありEdge 完全対応 12Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 390936.
IE 完全対応 5.5Opera 完全対応 15Safari 完全対応 4WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 390936.
Opera Android 完全対応 14Safari iOS 完全対応 4Samsung Internet Android ?
The reset value
非標準
Chrome ? Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera ? Safari 完全対応 ありWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android ?

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mpcjazz
最終更新者: mfuji09,