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.

要素の拡大レベルを制御するには、CSSzoom プロパティを使用することができます。このプロパティの代わりに、transform: scale() を使用することもできます。

zoom プロパティは、対象となる要素を拡大縮小し、ページレイアウトに影響を与えます。拡大縮小の際、デフォルトの writing-mode を使用している場合、拡大縮小された要素は上部と中央から拡大縮小されます。

対照的に、scale() を使用して拡大縮小された要素は、レイアウトの再計算やページ上の他の要素を移動させることはありません。scale() を使用して、内容が含む要素よりも大きくなった場合は、オーバーフローが有効になります。さらに、scale() を使用して調整された要素は、デフォルトでは中心から変形します。これは、transform-origin プロパティで変更できます。

構文

css
/* キーワード値 */
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 よりも小さな値はズームアウトします。

公式定義

初期値normal
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類アニメーション不可

形式文法

zoom =
  normal | reset | <number> | <percentage>

段落のリサイズ

この例では、段落要素はズームされており、段落にカーソルを合わせるとズーム値が解除されます。

HTML

html
<p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p>

CSS

css
.small {
  zoom: 75%;
}
.normal {
  zoom: normal;
}
.big {
  zoom: 2.5;
}
p:hover {
  zoom: unset;
}

結果

要素のリサイズ

この例では、div 要素は normal, <percentage>, <number> の値を使ってズームされています。

HTML

html
<div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div>

CSS

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 フィールドが定義されています。

html
<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 メッセージが追加されています。

html
<p class="zoom-notice">CSS zoom is not supported</p>

最後のブロックは、ズームされるコンテンツを定義しているだけです。

html
<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 の値として使っています。

css
html {
  --zoom-level: normal;
}
.content {
  max-width: 60ch;
  margin: auto;
  zoom: var(--zoom-level);
}

この最後の CSS ブロックでは、ブラウザが zoom をサポートしているかどうかをチェックし、サポートしている場合は not supported メッセージを display: none; に設定しています。

css
@supports (zoom: 1) {
  .zoom-notice {
    display: none;
  }
}

JavaScript

この JavaScript は、select フィールドの変更を監視し、コンテンツ・セクションの --zoom-level に新しい値(例えば style="--zoom-level: 1.5;")を設定します。

js
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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
zoom
The reset value
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

関連情報