zoom
zoom は CSS のプロパティで、要素の拡大レベルを制御するために使用できます。 このプロパティの代わりに、transform: scale() を使用することもできます。
zoom プロパティは、対象となる要素を拡大縮小し、ページレイアウトに影響を与えます。 拡大縮小の際、デフォルトの writing-mode を使用している場合、拡大縮小された要素は top と center から拡大縮小されます。
一方、 scale() を使用して拡大縮小された要素は、レイアウトの再計算やページ上の他の要素を移動させることはありません。 scale() を使用して、内容が含む要素よりも大きくなった場合は、 overflow が有効になります。 さらに、 scale() を使用して調整された要素は、デフォルトでは中心から変形します。これは、transform-origin プロパティで変更できます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 126 | 3.1 | 18 | 3 | |
注釈 1件
実装メモ
- Firefox 131 より前では、SVG 要素は適切にズームされません。 バグ 1905023 およびバグ 878346 を参照してください。
基本構文
CSS
.zoomed {
zoom: 1.5; /* Enlarge to 150% */
}
.small {
zoom: 0.75; /* Reduce to 75% */
}ライブデモ
実務での使いどころ
-
コンテンツの拡大表示
カードやウィジェットをレイアウトに影響を与えながら拡大し、注目させたいコンテンツを目立たせます。
注意点
- zoom はレイアウトのリフローを引き起こすため、パフォーマンスへの影響があります。アニメーションには transform: scale() を使用してください。
アクセシビリティ
- zoom によるコンテンツの拡大がページ全体のレイアウトを崩さないことを確認し、WCAG 1.4.10 のリフロー要件を満たしてください。