HTMLのWindow innerWidthプロパティとは？構文と使い方をサンプルコードで解説
HTMLのWindow innerWidthプロパティは、HTMLドキュメント上でウィンドウのコンテンツ領域（表示領域）の幅を取得するためのプロパティです。読み取り専用のプロパティで、戻り値はピクセル単位の整数値となります。ブラウザウィンドウの実際の幅に応じた処理を行いたい場合などに活用できます。
構文
基本となる構文は以下のとおりです。
window.innerWidth
主な特徴
- ウィンドウのコンテンツ領域の幅をピクセル（px）単位で返します。
- 垂直スクロールバーが表示されている場合は、その幅を含んだ値が返されます。
- Chrome、Firefox、Safari、Edgeなど主要なブラウザすべてで利用可能です。
それでは、HTML Window innerWidthプロパティの具体的な使用例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window innerWidthプロパティ</h1>
<button onclick="display()" class="btn">ウィンドウの内部幅を表示</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'ウィンドウの内部幅：' + window.innerWidth + "px";
}
</script>
</body>
</html>
実行結果
「ウィンドウの内部幅を表示」ボタンをクリックすると、ウィンドウのコンテンツ領域の内部幅が画面に表示されます。
まとめ
window.innerWidthを使えば、JavaScriptだけで簡単にブラウザウィンドウの幅を取得できます。レスポンシブデザインや動的なレイアウト制御を実装する際にぜひ活用してください。なお、ウィンドウの高さを取得したい場合は、window.innerHeightプロパティを使用します。
-
HTML DOM Window frameElementプロパティの使い方を徹底解説
HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM
-
HTML DOMのWindow closedプロパティとは？使い方とサンプルコードを解説
HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ