HTML Window screenXプロパティとは？ウィンドウのX座標を取得する方法を実例付きで解説
HTMLのWindow screenXプロパティは、スクリーン（画面）に対する現在のウィンドウの相対的な水平座標（X座標）をピクセル単位で返します。このプロパティは読み取り専用であり、主要なブラウザすべてでサポートされているため、幅広い環境で安心して利用できます。
構文
Window screenXプロパティの基本的な構文は以下の通りです。
window.screenX
それでは、HTML Window screenXプロパティの具体的な使用例を見ていきましょう。
サンプルコード
<!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 screenX Property Demo</h1>
<button onclick="display()" class="btn">screenXの値を表示</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'スクリーンに対するウィンドウの水平座標：' + window.screenX + 'px';
}
</script>
</body>
</html>実行結果
ページ上の「screenXの値を表示」ボタンをクリックすると、スクリーンに対するウィンドウの水平座標が画面に表示されます。
補足ポイント
window.screenXは、ブラウザウィンドウを移動させると値が動的に変化します。なお、類似のプロパティとして垂直方向のY座標を取得するwindow.screenYも存在し、両者を組み合わせることでウィンドウの正確な表示位置を把握できます。
-
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（ウィンドウが開いている場合）サ