jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる｜DAD UNION

Webサイトを操作する際、ページ全体を拡大・縮小できる機能を求められることがあります。特に、ユーザーの利便性やアクセシビリティを向上させるため、画面サイズを簡単に調整できる方法は役立ちます。本記事では、jQueryの.cssとzoomプロパティを使用してページ全体を拡大・縮小する方法を解説します。

また、ブラウザの互換性やレスポンシブ対応などの課題についても触れ、CSSのtransform:scaleを用いた代替アプローチもご紹介します。

Contents

zoom用クリックボタンのCSSスタイリング
JavaScriptで拡大・縮小を実現するコード
zoom用ボタンのHTMLコード
jQueryの.cssとzoomでページ全体を拡大・縮小表示したページデモ
ブラウザ互換性と代替アプローチ
まとめ

zoom用クリックボタンのCSSスタイリング

以下は、zoom機能を実現するためのボタンスタイリングの例です。このCSSはデモ用のもので、プロジェクトのデザインに合わせてカスタマイズしてください。

<style type="text/css">
<!--
.cWrap{
	width:800px;
	height:800px;
	margin:0 auto;
	border:solid 3px #333;
}
.clBtn{
	width:120px;
	height:35px;
	background-color:#333;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
.clBtn:hover{
	width:120px;
	height:35px;
	background-color:#666;
	color:#fff;
	font-weight:bold;
	margin:20px auto;
	line-height:2.2em;
	cursor:pointer;
}
-->
</style>

JavaScriptで拡大・縮小を実現するコード

次に、jQueryを使ったJavaScriptコードを見ていきます。各ボタンのクリックイベントに応じて、ページ全体を拡大・縮小します。
各ボタンをクリックするとjQueryのcssでzoomを25％、50％、100％、150％、200％で拡大・縮小します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
	$('#ick25').click(function() {
		$("body").css("zoom","25%");
	});
	$('#ick50').click(function() {
		$("body").css("zoom","50%");
	});
	$('#ick100').click(function() {
		$("body").css("zoom","100%");
	});
	$('#ick150').click(function() {
		$("body").css("zoom","150%");
	});
	$('#ick200').click(function() {
		$("body").css("zoom","200%");
	});
});
// -->
</script>

zoom用ボタンのHTMLコード

以下は、拡大・縮小用ボタンをHTMLで記述した例です。このコードをそのままコピーして、動作確認ができます。
25％、50％、100％、150％、200％のボタンを用意しました。

<div class="cWrap">


<h1>ページ全体を以下の倍数に拡大・縮小します。</h1>



<div id="ick25" class="clBtn">0.25倍</div>


<div id="ick50" class="clBtn">0.5倍</div>


<div id="ick100" class="clBtn">1倍</div>


<div id="ick150" class="clBtn">1.5倍</div>


<div id="ick200" class="clBtn">2倍</div>


</div>
<!--/cWrap-->