zoomプロパティの説明
CSSのzoomプロパティは、要素の拡大・縮小倍率を指定します。本プロパティの効果は、ブラウザの表示メニューから実行できる拡大・縮小に似ています。ズームインであればCtrl++（Mac：command++）、ズームアウトであればCtrl+-（Mac：command+-）の操作で行うものです。
現在、この機能のサポートは中断されたため、より高機能なtransformプロパティを使用して下さい。
zoomに指定できる値
normal- 要素を通常の大きさで表示します。これが初期値です。
reset- ユーザーの操作による要素の拡大・縮小をリセットします。WebKitベースのブラウザでのみ機能します。
<percentage>- パーセンテージでズーム率を表します。
100%を基準とし、101%以上であればズームイン、99%以下であればズームアウトとなります。 <number>- 数値でズーム率を表します。
1.0を基準とし、1.1以上であればズームイン、0.9以下であればズームアウトとなります。
zoomの使い方とサンプルコード
zoomプロパティの構文は以下の通りです。
/* キーワード値 */
zoom: normal;
zoom: reset;
/* <percentage>値 */
zoom: 50%;
zoom: 100%;
zoom: 150%;
/* <number>値 */
zoom: 0.5;
zoom: 1.0;
zoom: 1.5;
/* グローバル値 */
zoom: inherit;
zoom: initial;
zoom: unset;
zoomの実例
それでは実際にzoomプロパティの書き方を見ていきましょう。以下の例は、画像に対して割合でズーム倍率を指定した場合と数値でズーム倍率を指定した場合の比較です。対応していないブラウザでは、元画像の寸法で表示されます。
これと同じ機能は、transformプロパティでも代替可能です。これから実装する場合は要素の座標変換について学びましょう。
<div class="samp_box">
<section id="item_1">
<h1>zoom: 50%;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
<section id="item_2">
<h1>zoom: 0.5;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
<section id="item_3">
<h1>zoom: 100%;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
<section id="item_4">
<h1>zoom: 1.0;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
<section id="item_5">
<h1>zoom: 150%;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
<section id="item_6">
<h1>zoom: 1.5;</h1>
<img src="/images/sample_img100x50.png" alt="img">
</section>
</div>
.samp_box {
padding: 1rem;
background-color: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > img {
margin: .5rem 0 0;
}
#item_1 img {
zoom: 50%;
}
#item_2 img {
zoom: 0.5;
}
#item_3 img {
zoom: 100%;
}
#item_4 img {
zoom: 1.0;
}
#item_5 img {
zoom: 150%;
}
#item_6 img {
zoom: 1.5;
}