現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

スクリーン

【JavaScript入門】screen.availLeftとは?有効表示領域の左端X座標を取得する方法を解説

投稿日:2019年5月25日 更新日:

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>

<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:有効領域の高さ

まとめ

  • screen.availLeft は「利用可能な画面領域の左端X座標」を返す
  • シングルモニタでは 0 が返ることが多い
  • マルチディスプレイ環境で特に有用

関連リンク

X

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。
レンタルサーバー エックスサーバー

-スクリーン
-

執筆者:

関連記事

【JavaScript入門】screen.colorDepthとは?モニタの色深度(ビット数)を取得する方法を解説

JavaScriptのscreen.colorDepthとは?モニタの色深度(表示色数)を取得する方法を解説 screen.colorDepth は、モニタが表示できる色数(色深度)をビット値で返すプ …

【JavaScript入門】screen.availTopとは?有効表示領域の上端Y座標を取得する方法をわかりやすく解説

JavaScriptのscreen.availTopとは?有効表示領域の上端Y座標を取得する方法を解説 screen.availTop は、モニタの有効領域(タスクバーやメニューバーを除いた部分)の上 …

【JavaScript入門】screen.widthとは?モニタの幅(画面サイズ)を取得する方法をわかりやすく解説

JavaScriptのscreen.widthとは?モニタの幅(画面サイズ)を取得する方法を解説 screen.width は、モニタ全体の横幅(ピクセル数)を取得するためのプロパティです。 ユーザー …

【JavaScript入門】screen.heightとは?モニタの高さ(画面サイズ)を取得する方法をわかりやすく解説

JavaScriptのscreen.heightとは?モニタの高さ(画面サイズ)を取得する方法を解説 screen.height は、モニタ全体の高さ(ピクセル数)を取得するためのプロパティです。 ユ …

【JavaScript入門】screen.availWidthとは?有効表示領域の幅を取得する方法をわかりやすく解説

JavaScriptのscreen.availWidthとは?有効表示領域の幅を取得する方法を解説 screen.availWidth は、モニタの表示領域からタスクバーやメニューバーなどを除いた「実 …