zoom
Baseline 2024Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Please take two minutes to fill out our short survey.
要素の拡大レベルを制御するには、CSS の zoom プロパティを使用することができます。このプロパティの代わりに、transform: scale() を使用することもできます。
zoom プロパティは、対象となる要素を拡大縮小し、ページレイアウトに影響を与えます。拡大縮小の際、デフォルトの writing-mode を使用している場合、拡大縮小された要素は上部と中央から拡大縮小されます。
対照的に、scale() を使用して拡大縮小された要素は、レイアウトの再計算やページ上の他の要素を移動させることはありません。scale() を使用して、内容が含む要素よりも大きくなった場合は、オーバーフローが有効になります。さらに、scale() を使用して調整された要素は、デフォルトでは中心から変形します。これは、transform-origin プロパティで変更できます。
構文
/* キーワード値 */
zoom: normal;
zoom: reset;
/* <percentage> 値 */
zoom: 50%;
zoom: 200%;
/* <number> 値 */
zoom: 1.1;
zoom: 0.7;
/* グローバル値 */
zoom: inherit;
zoom: initial;
zoom: revert;
zoom: revert-layer;
zoom: unset;
値
normal-
要素を通常のサイズでレンダリングします。
reset-
ユーザーが非ピンチベースのズームを利用したとき（例えば Ctrl - - または Ctrl + + のキーボード・ショートカットを利用したとき）は要素を拡大縮小しない。この値を使用せず、代わりに標準の
unset値を使用してください。 <percentage>-
ズーム率です。
100%とnormalは等価です。100%よりも大きな値はズームイン、100%よりも小さな値はズームアウトします。 <number>-
ズーム率です。対応するパーセンテージ（
1.0=100%=normal）に相当します。1.0よりも大きな値はズームイン、1.0よりも小さな値はズームアウトします。
公式定義
| 初期値 | 1 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | Converted to <number> |
| 計算値 | as specified, but with <percentage> converted to the equivalent <number> |
| アニメーションの種類 | アニメーション不可 |
形式文法
zoom = normal | reset | <number> | <percentage>
例
段落のリサイズ
この例では、段落要素はズームされており、段落にカーソルを合わせるとズーム値が解除されます。
HTML
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>
CSS
.small {
zoom: 75%;
}
.normal {
zoom: normal;
}
.big {
zoom: 2.5;
}
p:hover {
zoom: unset;
}
結果
要素のリサイズ
この例では、div 要素は normal, <percentage>, <number> の値を使ってズームされています。
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%;
vertical-align: middle;
display: inline-block;
}
div#a {
background-color: gold;
zoom: normal; /* 円の直径は 25px */
}
div#b {
background-color: green;
zoom: 200%; /* 円の直径は 50px */
}
div#c {
background-color: blue;
zoom: 2.9; /* 円の直径は 72.5px */
}
結果
ズーム率を操作する
この例では、select フィールドを使ってコンテンツのズームレベルを変更しています。
HTML
HTML のこの最初のブロックでは、異なるズーム値を持つ select フィールドが定義されています。
<section class="controls">
<label for="zoom"
>Zoom level
<select name="zoom" id="zoom">
<option value="0.5">Extra Small</option>
<option value="0.75">Small</option>
<option value="normal" selected>Normal</option>
<option value="1.5">Large</option>
<option value="2">Extra Large</option>
</select>
</label>
</section>
この 2 番目のブロックには、ブラウザーが zoom をサポートしている場合には非表示となる not supported メッセージが追加されています。
<p class="zoom-notice">CSS zoom is not supported</p>
最後のブロックは、ズームされるコンテンツを定義しているだけです。
<section class="content">
<h1>This is the heading</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
provident repellat officiis facilis alias facere obcaecati quos sunt
voluptas! Iste.
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat inventore
ea eveniet, fugiat in consequatur molestiae nostrum repellendus nam
provident repellat officiis facilis alias facere obcaecati quos sunt
voluptas! Iste.
</p>
</section>
CSS
この CSS の最初のブロックでは、カスタムプロパティを使って --zoom-level の開始値を設定し、それをコンテンツブロックの zoom の値として使っています。
html {
--zoom-level: normal;
}
.content {
max-width: 60ch;
margin: auto;
zoom: var(--zoom-level);
}
この最後の CSS ブロックでは、ブラウザーが zoom をサポートしているかどうかをチェックし、サポートしている場合は not supported メッセージを display: none; に設定しています。
@supports (zoom: 1) {
.zoom-notice {
display: none;
}
}
JavaScript
この JavaScript は、select フィールドの変更を監視し、コンテンツ・セクションの --zoom-level に新しい値（例えば style="--zoom-level: 1.5;"）を設定します。
const zoomControl = document.querySelector("#zoom");
const content = document.querySelector(".content");
const updateZoom = () => {
content.style = `--zoom-level: ${zoomControl.value}`;
};
zoomControl.addEventListener("change", updateZoom);
結果
仕様書
| Specification |
|---|
| CSS Viewport Module Level 1 # zoom-property |