ズームプロパティ

最終更新：2026-09-13

zoom ズームプロパティ

zoom プロパティは、標準外のスケーリング変換を適用し、要素とそのすべての子要素を比率的に拡大または縮小します。transform: scale() と異なり、zoom は要素のレイアウト空間に影響します（拡大縮小後の実際の空間を占有する）し、完全な再描画（reflow）を引き起こします。CSS 標準ではありませんが、ブラウザの対応は広範です。

カテゴリ
初期値	normal
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

zoom: normal | reset | <number> | <percentage>;

⚙️ 値

値	タイプ	説明
`normal \| reset`	キーワード	プリセット値
`<number> \| <percentage>`	タイプ	ズーム倍率

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
zoom	✓ v10	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： zoom は非標準であり CSS 仕様に含まれていません。Firefox は対応していません（旧バージョンは完全非対応、新バージョンも layout.css.zoom.enabled フラグ有効時のみ）。

ヒント： 標準的で広く対応された拡大縮小効果には transform: scale() を使用してください。zoom はクイックプロトタイプや社内プロジェクトに適しています。

❓ よくある質問

Qzoom プロパティと transform: scale() の違いは何ですか？

Azoom は文書フロー内の要素の実際の占有空間とレイアウトサイズを変更し、周囲の要素に影響します（再描画と同等）。transform: scale() は視覚的なサイズだけを変更し、レイアウト空間を維持します。zoom の拡大縮小は子要素の描画サイズ（全体のピクセル拡大）にも影響し、完全な再描画を引き起こします。クロスブラウザの一貫性では transform: scale() の方が信頼できます。

QCSS で zoom プロパティの reset 値は実際に何を意味しますか？

Areset は Safari が導入した非標準の値で、ズームをリセットすることを意味します。zoom: 1 と同等ですが、継承された zoom 値がその要素に影響し続けるのを防ぎます。デフォルトの normal は、ユーザーが設定したページのズーム（1 に相当）に合わせることを意味します。reset の用途は限定的で、対応は主に WebKit エンジンにとどまるため、ブラウザ間でテストが必要です。

Qzoom プロパティの対応状況はどうですか？Firefox は対応していますか？

Azoom は歴史的に IE/WebKit の非標準プロパティでした。Chrome、Edge、Safari はよく対応しています。Firefox はバージョン 126（2024年）でデフォルト有効になりました。CSS Viewport 仕様への取り込みが始まっていますが、依然として事実上の標準です。本番環境でクロスブラウザの拡大縮小には、標準の transform: scale() を推奨します。

QCSS の zoom プロパティはページの描画パフォーマンスに影響しますか？

Aはい。zoom はレイアウトの寸法を変更するため、拡大縮小で再描画と再ペイントが発生し、アニメーション性能は transform: scale() より明らかに劣ります。zoom はページやコンポーネントの一度きりの拡大縮小（レイアウト全体を縮小して収めるなど）に適しており、フレームごとのアニメーションには向きません。アニメーション付きの拡大縮小には transform: scale() を、本当にレイアウトサイズの変更が必要な場合に zoom を使用してください。