zoom:要素の拡大・縮小倍率を制御する

初期値 normal
適用対象 全ての要素
継承 しない
アニメーション <integer>値
対応ブラウザ caniuseで確認

このプロパティは非推奨または廃止になりました。新しく作るウェブサイトへの使用は避けて下さい。また、既存のソースコードの中に含まれている場合は更新をお勧めします。詳しくは現行の標準仕様に従って下さい。

zoomプロパティの説明

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プロパティの構文は以下の通りです。

CSS
/* キーワード値 */
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プロパティでも代替可能です。これから実装する場合は要素の座標変換について学びましょう。

表示確認
CSS
.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;
}
HTML
<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>

zoomに関連するCSSプロパティ

非推奨または廃止されたプロパティ
background-break インライン要素の背景画像の繰り返し方法を指定する
baseline-shift 優先するベースラインを指定し直す
bookmark-label ブックマークのラベル(名前)を指定する
bookmark-level ブックマークのレベル(度合い)を指定する
bookmark-target ブックマークのターゲット(対象)を指定する
border-break ボックスが分割された場合のボーダーの表示方法を指定する
box-align 親要素内に含まれる子要素を揃える水平位置の基準を指定する
box-direction 親ボックス内に配置する子要素の表示方向を指定する
ime-mode テキスト入力時のIMEの状態を指定する
marker-offset リストマーカーとの間隔を指定する
page-break-after 印刷時の改ページ位置を、特定の要素直後に指定する
page-break-before 印刷時の改ページ位置を、特定の要素直前に指定する
scrollbar-base-color スクロールバーのベースになる色を指定する
scrollbar-arrow-color スクロールバーの矢印にあたる色を指定する
scrollbar-face-color スクロールバーの表面にあたる色を指定する
scrollbar-3dlight-color スクロールバーの左端と上端にあたる色を指定する
scrollbar-highlight-color スクロールバーのハイライトにあたる色を指定する
scrollbar-shadow-color スクロールバーの影にあたる色を指定する
scrollbar-darkshadow-color スクロールバーの右端と下端にあたる色を指定する
text-autospace アルファベット等との間隔を指定
zoom 要素の表示倍率(拡大・縮小)を指定する