We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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
適用対象全要素
継承不可
メディアvisual
計算値指定値
アニメーションの種類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;
}

結果

Specifications

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

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本対応 (有) (有) 未サポート [1] 5.5 (有) 4.0
reset ? 未サポート ? 未サポート ? (有)
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本対応 ? (有) ? [1] ? ? ?
reset ? 未サポート ? 未サポート ? ?

[1]: バグ 390936 – Implement Internet Explorer zoom property for css

関連情報

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

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