zoom
Baseline 2024 Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
zoom は CSS のプロパティで、要素の拡大レベルを制御するために使用できます。 このプロパティの代わりに、transform: scale() を使用することもできます。
zoom プロパティは、対象となる要素を拡大縮小し、ページレイアウトに影響を与えます。 拡大縮小の際、既定の writing-mode を使用している場合、拡大縮小された要素は top と center から拡大縮小されます。
一方、 scale() を使用して拡大縮小された要素は、レイアウトの再計算やページ上の他の要素を移動させることはありません。 scale() を使用して、内容が含む要素よりも大きくなった場合は、 overflow が有効になります。 さらに、 scale() を使用して調整された要素は、既定では中心から変形します。これは、transform-origin プロパティで変更できます。
構文
/* <percentage> 値 */ zoom: 50%; zoom: 200%; /* <number> 値 */ zoom: 1.1; zoom: 0.7; /* 標準外のキーワード値 */ zoom: normal; zoom: reset; /* グローバル値 */ zoom: inherit; zoom: initial; zoom: revert; zoom: revert-layer; zoom: unset; 値
<percentage>-
ズーム率です。
100%とnormalは等価です。100%よりも大きな値はズームイン、100%よりも小さな値はズームアウトします。 <number>-
ズーム率です。対応するパーセンテージ（
1.0=100%=normal）に相当します。1.0よりも大きな値はズームイン、1.0よりも小さな値はズームアウトします。
2 つの標準外のキーワード値はお勧めしません。ブラウザーの互換性データを調べてください。
公式定義
| 初期値 | 1 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | Converted to <number> |
| 計算値 | as specified, but with <percentage> converted to the equivalent <number> |
| アニメーションの種類 | アニメーション不可 |
形式文法
zoom =
<number [0,∞]> |
<percentage [0,∞]>
例
段落のリサイズ
この例では、段落要素はズームされており、段落にカーソルを合わせるとズーム値が解除されます。
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 のこの最初のブロックでは、異なる zoom 値を持つ select フィールドが定義されています。
<section class="controls"> <label for="zoom" >ズームレベル <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 に対応している場合には非表示となる、対応していませんというメッセージが追加されています。
<p class="zoom-notice">CSS zoom に対応していません</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 に対応しているかどうかをチェックし、対応している場合は対応していませんというメッセージを 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 |
ブラウザーの互換性
Loading…
関連情報
- CSS-Tricks' CSS Almanac の
zoomの記事 transformscaleunsetキーワード- Legacy
zoomproperty (CSS-Tricks, 2013)