この記事で分かること
- onresize イベントの役割と仕組み
- ウィンドウサイズ変更時に処理を実行する方法
- HTML と JavaScript での onresize の書き方
- onresize が活躍する具体的な場面
- レスポンシブ対応や動的レイアウト調整の基礎
onresize は、ウィンドウやフレームのサイズが変更されたときに発生するイベントです。
画面サイズに応じてレイアウトを調整したり、リサイズ時に特定の処理を実行したい場合に利用します。
onresizeイベントとは？
ブラウザのウィンドウサイズが変更された瞬間に発生するイベントです。
レスポンシブ対応や、サイズ変更時の警告・再描画処理などに使われます。
使用例：ウィンドウサイズ変更時にメッセージを表示
<body onresize="alert('リサイズされました')">
→ ウィンドウのサイズが変わるたびにダイアログが表示されます。
JavaScriptでの書き方（推奨）
HTML に直接書く方法のほか、JavaScript でイベントを設定する方法もあります。
window.onresize = function() {
console.log("ウィンドウがリサイズされました");
};
→ HTML を汚さずにイベントを設定できるため、こちらの書き方が一般的です。
onresize が使える場面
- 画面サイズに応じてレイアウトを変更したいとき
- ウィンドウ幅に応じて画像サイズを変更したいとき
- リサイズ時に特定の処理を実行したいとき
- デバッグ用にサイズ変更を検知したいとき
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
onresize のような「画面サイズ変化に応じた処理」は、JavaScript の UI 制御の基礎です。
書籍ではこれらを体系的に順序立てて学べるため、動的レイアウトの理解が深まりやすくなります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
イベント処理の基本や、画面サイズに応じた動きの仕組みを丁寧に理解できます。
この本で解決できること：
- onresize の動作を視覚的に理解できる
- イベントとレイアウト調整の関係が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
onresize を含むイベント処理の仕組みを深く理解し、実務レベルの UI 制御が身につきます。
この本で解決できること：
- onresize の動作原理を体系的に理解できる
- レスポンシブな UI を実装するための基礎が身につく
- 現代的な JavaScript の書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
onresize は「画面サイズの変化」を扱うイベントで、実際の動きを動画で見ると理解が一気に深まります。
Udemy では、動的レイアウトやイベント処理を初心者向けに丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
- onresize の動作を視覚的に理解できる
- 画面サイズに応じた UI 制御の基礎が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、onresize を含む UI 制御をさらに深めたい方に最適です。
この講座で解決できること：
- 動的レイアウト調整の実務的な実装を理解できる
- イベント処理と DOM 操作の連携が身につく
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- onresize と他イベントの使い分けで混乱しやすい
- 動的レイアウトの設計が難しい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウサイズ変更イベントのような UI 制御のつまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onresize に関するよくある質問（FAQ）
onresize はスマホでも動作する？
スマホでも動作しますが、画面回転（orientationchange）の方が適切な場合もあります。
リサイズのたびに処理が大量に実行されるのを防ぐには？
setTimeout を使った「ディレイ処理」や「debounce」を利用すると負荷を抑えられます。
onresize はどの要素でも使える？
基本的には window に対して使用します。要素のサイズ変化を検知したい場合は ResizeObserver が適しています。
レスポンシブ対応は onresize だけで実現できる？
CSS のメディアクエリと併用することで、より安定したレスポンシブ対応が可能です。
まとめ
onresizeはウィンドウやフレームのサイズ変更時に発生するイベント- HTML に直接書く方法と JavaScript で設定する方法がある
- レスポンシブ対応や動的レイアウト調整に便利
