はじめに
この記事を読めば、JavaScriptでウィンドウサイズ変更を行う方法が身につき、応用もできるようになります。
JavaScriptの基本から応用まで、初心者にもわかりやすい形で徹底解説していきます。
10個のサンプルコードを通して、使い方や注意点、応用例を学んでいきましょう。
●ウィンドウサイズ変更の基本
○JavaScriptとウィンドウサイズ変更
JavaScriptは、ウェブページの動的な振る舞いを制御するために使用されるプログラミング言語です。
ウィンドウサイズの変更は、レスポンシブデザインやUI/UXの向上のためによく利用されます。
●ウィンドウサイズ変更の使い方
○サンプルコード1:ウィンドウサイズを取得する
ウィンドウサイズを取得するには、window.innerWidth
とwindow.innerHeight
を使います。
これらは、ウィンドウの内部の幅と高さをピクセル単位で返します。
下記のサンプルコードでは、ウィンドウサイズを取得し、コンソールに表示しています。
console.log("ウィンドウ幅: " + window.innerWidth + "px");
console.log("ウィンドウ高さ: " + window.innerHeight + "px");
○サンプルコード2:ウィンドウサイズを変更する
ウィンドウサイズを変更するには、window.resizeTo()
メソッドを使います。
引数に新しい幅と高さを指定します。
下記のサンプルコードでは、ウィンドウサイズを500×500ピクセルに変更しています。
window.resizeTo(500, 500);
○サンプルコード3:ウィンドウサイズ変更時のイベントハンドラ
ウィンドウサイズが変更されたときに特定の処理を実行するには、resize
イベントを使用します。
下記のサンプルコードでは、ウィンドウサイズが変更されたときに、コンソールに新しいサイズが表示されます。
window.addEventListener("resize", function() {
console.log("ウィンドウ幅: " + window.innerWidth + "px");
console.log("ウィンドウ高さ: " + window.innerHeight + "px");
});
●ウィンドウサイズ変更の応用例
ウィンドウサイズ変更を利用した応用例を紹介します。
これらのサンプルコードを参考に、独自のウェブサイトに応じたカスタマイズを試みてください。
○サンプルコード4:ウィンドウサイズに応じた画像の表示
ウィンドウサイズに応じて表示する画像を切り替える例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、スマホ向けの画像が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じた画像の表示</title>
<style>
#target-image {
max-width: 100%;
}
</style>
</head>
<body>
<img id="target-image" src="pc_image.jpg" alt="表示画像">
<script>
const targetImage = document.getElementById("target-image");
function setImageSource() {
if (window.innerWidth < 768) {
targetImage.src = "sp_image.jpg";
} else {
targetImage.src = "pc_image.jpg";
}
}
window.addEventListener("resize", setImageSource);
setImageSource();
</script>
</body>
</html>
○サンプルコード5:ウィンドウサイズに応じたナビゲーションの切り替え
ウィンドウサイズが変わったときに、ナビゲーションメニューの表示形式を切り替える例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、ドロップダウンメニューに切り替えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じたナビゲーションの切り替え</title>
<style>
/* ここにCSSを記述 */
</style>
</head>
<body>
<nav id="main-nav">
<!-- ナビゲーションメニューのコンテンツ -->
</nav>
<script>
const mainNav = document.getElementById("main-nav");
function toggleNavigation() {
if (window.innerWidth < 768) {
// ドロップダウンメニューに切り替える処理
} else {
// 通常のナビゲーションメニューに戻す処理
}
}
window.addEventListener("resize", toggleNavigation);
toggleNavigation();
</script>
</body>
</html>
○サンプルコード6:ウィンドウサイズに応じたフォントサイズの変更
ウィンドウサイズに応じて、フォントサイズを変更する例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、フォントサイズが小さくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じたフォントサイズの変更</title>
<style>
body {
font-size: 18px;
}
.smaller-font {
font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
<p>ウィンドウサイズに応じてフォントサイズが変わります。</p>
</div>
<script>
const content = document.getElementById("content");
function adjustFontSize() {
if (window.innerWidth < 768) {
content.classList.add("smaller-font");
} else {
content.classList.remove("smaller-font");
}
}
window.addEventListener("resize", adjustFontSize);
adjustFontSize();
</script>
</body>
</html>
●注意点と対処法
ウィンドウサイズ変更に関する注意点と対処法を説明します。
○パフォーマンスへの影響
ウィンドウサイズ変更に伴う処理が多いと、パフォーマンスに影響が出ることがあります。
特にresize
イベントは、ウィンドウサイズ変更中に何度も発火します。
これを防ぐために、イベント発火の間隔を制限するデバウンス(debounce)処理が推奨されます。
下記のサンプルコードは、デバウンス処理を適用した例です。
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
function adjustFontSize() {
// フォントサイズ調整の処理
}
const debouncedAdjustFontSize = debounce(adjustFontSize, 200);
window.addEventListener("resize", debouncedAdjustFontSize);
●カスタマイズ方法
ウィンドウサイズ変更に関するカスタマイズ方法を紹介します。
○サンプルコード7:複数のブレークポイントでの処理
ウィンドウサイズに応じて複数のブレークポイントで処理を行いたい場合、下記のサンプルコードを参考にしてください。
function handleResize() {
if (window.innerWidth < 480) {
// ウィンドウサイズが480ピクセル未満の場合の処理
} else if (window.innerWidth < 768) {
// ウィンドウサイズが480ピクセル以上で768ピクセル未満の場合の処理
} else if (window.innerWidth < 1024) {
// ウィンドウサイズが768ピクセル以上で1024ピクセル未満の場合の処理
} else {
// ウィンドウサイズが1024ピクセル以上の場合の処理
}
}
window.addEventListener("resize", handleResize);
handleResize();
○サンプルコード8:ウィンドウサイズに応じたスライドショーの変更
ウィンドウサイズに応じて、スライドショーの表示方法や画像サイズを変更する例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、スライドショーが縦並びになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じたスライドショーの変更</title>
<style>
.slide {
width: 100%;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
}
.vertical-slides .slide {
height: 100px;
}
</style>
</head>
<body>
<div id="slideshow">
<div class="slide" style="background-image: url('image1.jpg');"></div>
<div class="slide" style="background-image: url('image2.jpg');"></div>
<div class="slide" style="background-image: url('image3.jpg');"></div>
</div>
<script>
const slideshow = document.getElementById("slideshow");
function adjustSlideshow() {
if (window.innerWidth < 768) {
slideshow.classList.add("vertical-slides");
} else {
slideshow.classList.remove("vertical-slides");
}
}
window.addEventListener("resize", adjustSlideshow);
adjustSlideshow();
</script>
</body>
</html>
○サンプルコード9:ウィンドウサイズに応じた動画の再生速度調整
ウィンドウサイズに応じて、動画の再生速度を調整する例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、動画の再生速度が遅くなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じた動画の再生速度調整</title>
</head>
<body>
<video id="video" src="sample_video.mp4" controls></video>
<script>
const video = document.getElementById("video");
function adjustVideoSpeed() {
if (window.innerWidth < 768) {
video.playbackRate = 0.75;
} else {
video.playbackRate = 1;
}
}
window.addEventListener("resize", adjustVideoSpeed);
adjustVideoSpeed();
</script>
</body>
</html>
○サンプルコード10:ウィンドウサイズに応じたアコーディオンメニューの変更
ウィンドウサイズに応じて、アコーディオンメニューの表示方法を変更する例です。
下記のサンプルコードでは、ウィンドウサイズが768ピクセル未満の場合、アコーディオンメニューが表示され、それ以上の場合は通常のナビゲーションメニューが表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウサイズに応じたアコーディオンメニューの変更</title>
<style>
.menu {
display: flex;
flex-wrap: wrap;
list-style: none;
padding-left: 0;
}
.menu li {
flex: 1;
}
.accordion {
display: none;
flex-direction: column;
}
.accordion li {
order: 1;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
<script>
const menu = document.getElementById("menu");
function adjustMenu() {
if (window.innerWidth < 768) {
menu.classList.add("accordion");
} else {
menu.classList.remove("accordion");
}
}
window.addEventListener("resize", adjustMenu);
adjustMenu();
</script>
</body>
</html>
●注意点と対処法
○レスポンシブデザインとの関係
ウィンドウサイズに応じた処理は、レスポンシブデザインにおいて重要な役割を果たします。
ただし、JavaScriptでウィンドウサイズに応じた処理を実装する場合、CSSのメディアクエリとの連携が重要になります。
適切に連携させることで、より効果的なレスポンシブデザインが実現できます。
○パフォーマンスへの影響
ウィンドウサイズが変更されるたびに処理が実行されるため、パフォーマンスに影響を与える可能性があります。
パフォーマンスへの影響を軽減するためには、デバウンス(debounce)やスロットリング(throttling)といった手法を適用することが有効です。
これらの手法を利用することで、処理の実行回数を制限し、パフォーマンスの低下を防ぐことができます。
また、CSSのメディアクエリを活用することで、JavaScriptの処理負荷を軽減することも可能です。
適切な実装方法を選択し、パフォーマンスへの影響を最小限に抑えましょう。
まとめ
この記事では、JavaScriptを用いたウィンドウサイズ変更の検出方法と、それを利用したサンプルコードや応用例を紹介しました。
また、注意点と対処法、カスタマイズ方法も説明しました。
これらの情報を参考に、ウェブサイトのレスポンシブデザインやユーザビリティ向上に役立ててください。
本記事を読めば、ウィンドウサイズ変更に関する処理を自由にカスタマイズできるようになります。