JavaScriptのscreen.availLeftとは？有効表示領域の左端X座標を取得する方法を解説
screen.availLeft は、モニタの有効領域（タスクバーやメニューバーを除いた部分）の左端が、画面全体のどのX座標から始まっているかを返すプロパティです。
特にマルチディスプレイ環境で役立ちます。
availLeftプロパティとは？
screen.availLeft は、モニタの有効領域の左端X座標をピクセル単位で返します。
- タスクバー・メニューバーなどを除いた「利用可能領域」の左端位置
- マルチディスプレイ環境では、サブモニタの位置を把握するのに便利
通常のシングルモニタ環境では 0 が返ることが多いです。
使用例：有効領域の左端X座標を取得して表示する
以下は、ページ読み込み時に availLeft を取得し、フォームに表示するサンプルです。
<html>
<head>
<title>JavaScript Sample</title>
<script>
function formInitialize() {
// モニタの有効な左端のX座標を表示
document.getElementById(“avail”).value = screen.availLeft;
}
</script>
</head>
<head>
<title>JavaScript Sample</title>
<script>
function formInitialize() {
// モニタの有効な左端のX座標を表示
document.getElementById(“avail”).value = screen.availLeft;
}
</script>
</head>
<body onload=”formInitialize()”>
<p><b>モニタの有効領域が表示されます。</b></p>
<form>
<p>モニタの有効な左端のX座標は <input type=”text” id=”avail” size=”8″> ピクセルです。</p>
</form>
</body>
</html>
→ 読み込み時に自動で有効領域の左端X座標が表示されます。
availLeft の用途
- マルチディスプレイ環境での画面位置の把握
- ウィンドウの初期位置を調整するスクリプト
- 画面レイアウトの最適化
関連プロパティ
screen.availTop：有効領域の上端Y座標screen.availWidth：有効領域の幅screen.availHeight：有効領域の高さ
初心者におすすめの学習書籍
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
まとめ
screen.availLeftは「利用可能な画面領域の左端X座標」を返す- シングルモニタでは 0 が返ることが多い
- マルチディスプレイ環境で特に有用
