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 | 要素の表示倍率(拡大・縮小)を指定する |