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

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

Screen(画面情報)

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

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

JavaScriptのscreen.availTopとは?有効表示領域の上端Y座標を取得する方法を解説

screen.availTop は、モニタの有効領域(タスクバーやメニューバーを除いた部分)の上端が、画面全体のどのY座標から始まっているかを返すプロパティです。
マルチディスプレイ環境で特に役立ちます。



availTopプロパティとは?

screen.availTop は、モニタの有効領域の上端Y座標をピクセル単位で返します。

  • タスクバー・メニューバーなどを除いた「利用可能領域」の上端位置
  • マルチディスプレイ環境では、サブモニタの縦方向の配置を把握するのに便利

通常のシングルモニタ環境では 0 が返ることが多いです。



使用例:有効領域の上端Y座標を取得して表示する

以下は、ページ読み込み時に availTop を取得し、フォームに表示するサンプルです。

<html>
<head>
  <title>JavaScript Sample</title>
  <script>
    function formInitialize() {
      // モニタの有効な上端のY座標を表示
      document.getElementById(“avail”).value = screen.availTop;
    }
  </script>
</head>

<body onload=”formInitialize()”>
  <p><b>モニタの有効領域が表示されます。</b></p>
  <form>
    <p>モニタの有効な上端のY座標は <input type=”text” id=”avail” size=”8″> ピクセルです。</p>
  </form>
</body>
</html>

→ 読み込み時に自動で有効領域の上端Y座標が表示されます。

availTop の用途

  • マルチディスプレイ環境での画面位置の把握
  • ウィンドウの初期位置を調整するスクリプト
  • 画面レイアウトの最適化

関連プロパティ

  • screen.availLeft:有効領域の左端X座標
  • screen.availWidth:有効領域の幅
  • screen.availHeight:有効領域の高さ

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • 紙の本でじっくり読み込みたい
  • 体系的にまとまった教材で学びたい
  • ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

いちばんやさしい JavaScript の教本

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

この本で解決できること:

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

いちばんやさしい JavaScript の教本

確かな力が身につくJavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

この本で解決できること:

  • JavaScriptの基礎を体系的に学び直せる
  • 初心者がつまずきやすい部分を重点的に理解できる
  • 実務で使えるレベルの基礎力を身につけられる

確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • エラーの原因が分からず、調べても解決できない
  • 学習の順番に自信が持てない
  • モチベーションが続かず、途中で止まってしまう
  • 実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

  • あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
  • 独学で詰まりやすいポイントを事前に教えてくれる
  • 学習方法の改善点をプロがアドバイスしてくれる
  • エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

DMM WEBCAMP 学習コース(無料相談はこちら)



まとめ

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

関連記事

【JavaScript入門】screen.pixelDepthとは?オフスクリーンの色深度を取得する方法をわかりやすく解説

2019/05/22   -Screen(画面情報)

JavaScriptのscreen.pixelDepthとは?オフスクリーンの色深度を取得する方法を解説 screen.pixelDepth は、モニタのオフスクリーン領域が使用している色深度(1ピク …

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

2019/05/21   -Screen(画面情報)

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

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

2019/05/27   -Screen(画面情報)

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

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

2019/05/23   -Screen(画面情報)

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

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

2019/05/28   -Screen(画面情報)

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

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-Screen(画面情報)

執筆者: