非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
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に非公式の仕様案を公開しています。
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- CSS-Tricks' CSS Almanac の
zoom
の記事 -
zoom
ビューポート記述子、@viewport
で使用 - Bug 390936: Implement Internet Explorer
zoom
property for CSS on the Firefox issue tracker Bugzilla