この記事で分かること
innerWidth/innerHeightの意味と取得方法outerWidth/outerHeightの意味と取得方法- 表示領域とウィンドウ全体の違い
- 実際のコード例とブラウザ仕様の注意点
innerWidth・innerHeight・outerWidth・outerHeight は、
ブラウザウィンドウのサイズを参照・設定するためのプロパティです。
表示領域のサイズやウィンドウ全体のサイズを取得したいときに利用します。
4つのプロパティの違い
ウィンドウサイズには「内側（表示領域）」と「外側（ウィンドウ全体）」の2種類があります。
innerWidth：ウィンドウ内側（表示領域）の幅innerHeight：ウィンドウ内側（表示領域）の高さouterWidth：ウィンドウ外側（枠やバーを含む全体）の幅outerHeight：ウィンドウ外側（枠やバーを含む全体）の高さ
値はすべてピクセル単位で扱います。
※ Internet Explorer では正しく動作しないため、サイズ変更には
resizeTo() や resizeBy() の使用が推奨されます。
使用例：内側のサイズを取得する
let iw = innerWidth;
let ih = innerHeight;
→ 現在のウィンドウの表示領域の幅と高さが変数に代入されます。
使用例：外側のサイズを取得する
document.write("ウィンドウの外側の幅：" + outerWidth + "");
→ ウィンドウ全体の幅を画面に表示します。
使用例：外側のサイズを設定する
outerHeight = 480;
→ ウィンドウ全体の高さを 480px に変更します。
inner / outer の違いを図解イメージで理解
inner：実際にページが表示される領域（コンテンツ部分）outer：タイトルバー・ツールバー・枠などを含むウィンドウ全体
ブラウザによって枠の大きさが異なるため、
inner と outer の差は環境によって変わります。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- ウィンドウサイズの仕組みを体系的に理解したい
innerWidthとouterWidthの違いを正しく把握したい- ブラウザの表示領域やウィンドウ構造を基礎から学びたい
ウィンドウサイズの取得は、JavaScript のWindow オブジェクト・ブラウザの描画構造の理解が欠かせないテーマです。
書籍ではこれらの基礎を順序立てて学べるため、inner / outer の違いを深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、ブラウザの仕組みや表示領域の概念を視覚的に理解できる入門書です。
innerWidth と outerWidth の違いを理解するうえで必要な「ウィンドウ構造」や「描画領域」の基礎を丁寧に学べます。
この本で解決できること：
Windowオブジェクトの基礎がしっかり理解できる- 表示領域とウィンドウ全体の違いが直感的に分かる
- 実際のサンプルでブラウザの挙動を確認しながら学べる
確かな力が身につく JavaScript「超」入門
Window オブジェクト・ブラウザAPI・描画領域など、
innerWidth / outerWidth の理解に必要な基礎を深く学びたい方に最適な入門書です。
実務で役立つブラウザ操作の知識も身につきます。
この本で解決できること：
- ウィンドウサイズの仕組みを体系的に理解できる
- ブラウザごとの挙動の違いを踏まえた実装が学べる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
innerWidth と outerWidth の違いは、
「ブラウザがどのように表示領域を計算しているか」を視覚的に理解すると一気に腑に落ちます。
動画で実際のウィンドウ挙動を見ながら学ぶことで、表示領域の概念が直感的に理解できます。
初心者のためのJavaScript 完全入門
Window / Document / Event の基礎を体系的に学べる人気講座です。
innerWidth の前提となる「ブラウザの描画領域」や「ウィンドウ構造」をしっかり理解できます。
この講座で解決できること：
- 表示領域とウィンドウ全体の違いが視覚的に理解できる
- ブラウザAPIの基礎が体系的に身につく
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
ウィンドウ操作・ブラウザAPI・描画領域など、
inner / outer の理解を実務レベルで深めたい方に最適な講座です。
この講座で解決できること：
Windowオブジェクトの実践的な使い方が身につく- ブラウザの描画仕様を踏まえた実装が理解できる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- 表示領域とウィンドウ全体の違いが曖昧なままになる
- ブラウザごとの挙動の違いで混乱しやすい
Windowオブジェクトの理解が断片的になりやすい- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウサイズやブラウザAPIのような実務的なテーマも丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
Windowオブジェクトや表示領域の理解を深めるアドバイスがもらえる- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
innerWidth / innerHeight / outerWidth / outerHeight に関するよくある質問（FAQ）
innerWidth と outerWidth の違いは？
innerWidth は表示領域の幅、outerWidth はウィンドウ全体（枠やバーを含む）の幅です。
値が環境によって変わるのはなぜ？
ブラウザや OS によってウィンドウ枠の大きさが異なるため、inner と outer の差が変わります。
outerHeight を変更しても正確に反映されないのはなぜ？
ブラウザによっては枠やツールバーの扱いが異なるため、指定した値と内部の表示領域が一致しないことがあります。
サイズ変更はどのブラウザでも可能ですか？
Chrome などではセキュリティ仕様によりサイズ変更が制限される場合があります。ポップアップウィンドウでは比較的自由に操作できます。
まとめ
innerWidth/innerHeight：表示領域のサイズouterWidth/outerHeight：ウィンドウ全体のサイズ- 値はピクセル単位で扱う
- IEでは非対応のため、サイズ変更は
resizeTo()/resizeBy()が安全
