【Javascript応用】リサイズイベント (resize)とは？ – ウィンドウのサイズ変更に対応する方法

リサイズイベントは、ウィンドウや要素のサイズが変更されたときに発生し、JavaScriptを使用してこれを検知し、対応する処理を実行することができます。この記事では、リサイズイベントの基本的な概念から、実際のコーディングでの活用方法までを詳しく解説します。

ウィンドウや要素のサイズが変更されると、ウェブページのレイアウトや表示が変わる可能性があります。そのため、ウィンドウや要素のサイズ変更に適切に対応するためには、リサイズイベントを活用する必要があります。

リサイズイベント (resize)とは

resizeイベントは、ウィンドウや要素のサイズが変更されたときに発生します。このイベントを使用することで、サイズ変更に応じたレスポンシブなデザインや動的なコンテンツの調整を行うことができます。

window.addEventListener('resize', function() {
    // サイズ変更に対する処理をここに記述する
});

実践例

resizeイベントを使用して、ウィンドウのリサイズに合わせて要素の表示を調整するなどの操作を行うことができます。

window.addEventListener('resize', function() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    console.log('Window size:', width, 'x', height);
    
    // ウィンドウの幅が一定以上の場合に特定の要素を表示する
    if (width > 768) {
        document.getElementById('sidebar').style.display = 'block';
    } else {
        document.getElementById('sidebar').style.display = 'none';
    }
});

まとめ

リサイズイベント (resize)は、ウィンドウや要素のサイズが変更されたときに発生し、それに応じた動的なレイアウト調整や表示制御を実現するための重要なイベントです。このイベントを活用することで、ウェブページのレスポンシブ性やユーザーエクスペリエンスを向上させることができます。