CSS `zoom` を使用した UI 要素のスケーリング

UI の一部分(ウィジェット、プレビューパネル、埋め込みコンポーネントなど)をスケーリングする必要がある場合、主に2つのツールがあります:zoom と transform: scale() です。これらは似ているように見えますが、動作は大きく異なります。間違った方を選択すると、デバッグが困難な方法でレイアウトが崩れる可能性があります。

この記事では、CSS の zoom プロパティがどのように機能するか、いつ使用すべきか、そして transform: scale() とどのように比較されるかを説明します。

CSS zoom プロパティが実際に行うこと

zoom プロパティは、要素をスケーリングし、レイアウトに参加します。要素を zoom すると、周囲のコンテンツは、要素の寸法を物理的に変更した場合と同じように、新しいスケーリングされたサイズに合わせてリフローします。

.preview {
  zoom: 0.75; /* 75%のサイズでレンダリングされ、元のスペースの75%を占有 */
}

数値またはパーセンテージを使用できます:

• zoom: 1 — 通常サイズ(デフォルト)
• zoom: 1.5 — 元のサイズの150%
• zoom: 0.5 — 元のサイズの50%
• zoom: 150% — 1.5 と同じ

古い仕様には normal と reset という2つのキーワード値が存在しますが、これらは非標準であり、本番コードでは避けるべきです。数値またはパーセンテージを使用してください。

CSS zoom vs transform: scale() — 主な違い

ここが最も混乱が生じる部分です。

transform: scale() は視覚的な変換です。要素の見た目を変更しますが、レイアウト上の占有領域は完全に変更されません。2倍にスケーリングされた120×120pxの div は、ドキュメントフロー内で依然として120×120pxのスペースを占有します。他の要素は移動しません。

zoom はレイアウトに影響を与えるスケールです。zoom: 2 を適用した120×120pxの div は、フロー内で240×240pxを占有します。周囲の要素はそれに合わせてリフローします。

zoom はレイアウトに参加するため、アニメーション化できません。アニメーション付きスケーリングが必要な場合は、代わりに transform: scale() を使用してください。

UI スケーリングに CSS zoom を使用することが理にかなう場合

CSS zoom を使用した UI のスケーリングは、スケーリングされた要素がレイアウト内で実際に新しいサイズを占有させたい場合に最も有用です:

スケーリングされたプレビューまたはサムネイル。 小さなプレビューカード内にフルサイズの UI コンポーネントをレンダリングする場合、zoom を使用すると、内部レイアウトをそのまま保ちながらサブツリー全体を縮小できます。

.thumbnail-preview {
  zoom: 0.3; /* コンポーネント全体を30%のサイズでレンダリング */
  width: 400px; /* コンポーネントの自然な幅 */
}

埋め込みウィジェット。 固定された内部サイズを持つサードパーティまたはレガシーウィジェットは、内部 CSS を変更せずにスケールダウンできます。

管理ダッシュボード。 CSS zoom を使用した UI のスケーリングは、レイアウトロジックを書き直すことなく、密度の高いデータパネルを制約された領域に収めるのに役立ちます。

ブラウザサポートと既知の注意点

CSS の zoom プロパティは、現在、Chromium ベースのブラウザ、Safari、および最新の Firefox(Firefox 126 以降でサポート)で広くサポートされています。もはや IE 専用の特殊機能ではなく、ブラウザサポートは Web Platform Status などのプラットフォームで追跡されています。

ただし、知っておくべき実際の不整合があります:

• Safari の getBoundingClientRect() は、歴史的に zoom 適用後の寸法ではなく、zoom 適用前の寸法を返していました。Chrome と Firefox は更新されたサイズを正しく報告します。JavaScript が zoom 適用後の要素の寸法に依存している場合は、ブラウザ間で慎重にテストしてください。
• zoom はレスポンシブデザインの代替ではありません。 メディアクエリや流動的なレイアウトのようにビューポートの変更に適応しません。レイアウトシステムとしてではなく、特定のスケーリングニーズに使用してください。
• ネストされた zoom は乗法的に複合されます。zoom: 0.5 の親に zoom: 0.5 の子が含まれている場合、子は元のサイズの25%でレンダリングされます。この乗算を明示的に考慮していない限り、同じサブツリーの複数のレベルに zoom を適用することは避けてください。

結論

CSS の zoom プロパティは焦点を絞ったツールです:要素とそのレイアウト上の占有領域を一緒にスケーリングする必要がある場合に使用してください。ドキュメントフローに影響を与えずに視覚的なスケーリングが必要な場合、またはアニメーションが必要な場合は transform: scale() を使用してください。getBoundingClientRect() に関するブラウザの不具合を把握し、非標準のキーワード値をスキップし、アニメーション化しないでください。これらの制約内で、zoom は実際の UI スケーリング問題のクラスをクリーンに解決します。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..