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 プロパティで変更できます。

構文

css
/* <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 つの標準外のキーワード値はお勧めしません。ブラウザーの互換性データを調べてください。

normal

要素を通常のサイズでレンダリングします。zoom: 1 と同じです。代わりに、グローバルな unset キーワードの値を使用してください。

reset

ユーザーが非ピンチベースのズームを利用したとき（例えば Ctrl - - または Ctrl + + のキーボードショートカットを利用したとき）は要素を拡大縮小しない。この値を使用せず、代わりに標準の unset 値を使用してください。

公式定義

初期値1
適用対象すべての要素
継承なし
パーセント値Converted to <number>
計算値as specified, but with <percentage> converted to the equivalent <number>
アニメーションの種類アニメーション不可

形式文法

zoom = 
  <number [0,∞]>      |
  <percentage [0,∞]>

例

段落のリサイズ

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

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 のこの最初のブロックでは、異なる zoom 値を持つ select フィールドが定義されています。

html
<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 に対応している場合には非表示となる、対応していませんというメッセージが追加されています。

html
<p class="zoom-notice">CSS zoom に対応していません</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 に対応しているかどうかをチェックし、対応している場合は対応していませんというメッセージを 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

ブラウザーの互換性

関連情報