【CSS Modules】zoomプロパティの使い方
zoomプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
zoomプロパティは、HTML要素の表示倍率を制御するプロパティです。このプロパティを使用すると、指定した要素とそのすべての子孫要素、さらにはパディングやボーダーといった要素の周りの空間までを含めて、全体的に拡大または縮小して表示させることができます。
値としては、標準の倍率を示す「normal」、小数点を含む数値（例: 1.5で150%）、またはパーセンテージ（例: 150%）を指定できます。例えば、zoom: 2;やzoom: 200%;と設定すると、対象の要素は通常の2倍の大きさで描画されます。
このプロパティは、かつてInternet Explorerや一部のWebkit系ブラウザで実装されていましたが、W3Cによって標準化されたCSSプロパティではありません。そのため、現在の主要なモダンブラウザ、特にFirefoxなどのブラウザではサポートされていないか、互換性に問題が生じる可能性があります。
要素の拡大・縮小には、標準的なCSSプロパティであるtransform: scale()を使用することが推奨されます。transform: scale()は、要素の視覚的なサイズを変更しますが、その要素が占めるレイアウト上の空間は元のサイズのままであるのに対し、zoomプロパティはレイアウト上の空間も変更する点で挙動が異なります。したがって、Webアプリケーション開発においては、ブラウザ間の互換性と将来性を考慮し、transform: scale()を利用することが一般的です。
公式リファレンス: zoom
構文(syntax)
1selector { 2 zoom: 150%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません