この記事で分かること
screen.availTopが示す値- 値が0や
undefinedのときの読み方 - 自分の環境で値を確認する手順
- 複数のモニタがある環境で誤解しやすい点
- 利用前に公式資料で確認する方法
この記事は、2026年10月時点のMDN Web Docs「Screen.availTop」とCSSOM View仕様に基づいています。対象：ブラウザ上のJavaScript。特定のブラウザ・OS・版には対象を限定していません。
JavaScriptのscreen.availTopは、画面の利用可能領域の上端を表す値です。ウィンドウの位置や、複数の画面の配置をそのまま示す値ではありません。
ホームページに動きや操作を加えるための、プログラムを書く言葉です。
値を確かめるには、ブラウザに備わっている入力画面を使います。ブラウザやOS、版によって対応状況や表示が異なる場合があるため、使う環境を特定して資料を確認することも大切です。
Google ChromeやSafariなど、ホームページを見るためのアプリです。
パソコンやスマートフォンの基本的な動作を管理するソフトウェアです。
ソフトウェアが更新された区切りを示す番号や名前です。使っている製品名と一緒に確認すると、どの更新段階か分かります。
JavaScriptの学習順序は、JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイドをご覧ください。画面に関する機能を順番に学びたい場合は、JavaScript Screenロードマップ｜初心者が最短で画面情報APIを理解するためのガイドが入口になります。
screen.availTopは、画面の情報を扱うAPIの一つです。
Application Programming Interfaceの略です。あるソフトが用意した機能を、決められた方法で利用するための窓口です。
screen.availTopが示す値
screen.availTopは、利用可能領域の上端の位置を数値で返します。位置を基準からどれだけ離れているかで表す方法を「座標」といいます。
ある場所が、基準となる場所からどれだけ離れているかを表す数値です。地図で場所を示す目印のようなものです。
利用可能領域とは、画面のうち、メニューなどに使われる部分を除いた範囲です。どの部分が除かれるかや値の出方は、利用する環境によって異なる場合があります。
availTopという名前だけから、複数のモニタのうち、どれが上にあるかは分かりません。画面の配置を調べる値として読み替えないようにしましょう。
次の図は、画面の上端と、画面上部にメニューなどがある場合の関係を示した概念図です。すべての環境で、領域の配置や値が同じになることを示すものではありません。
この値は、画面上の位置を小さな点の数で表します。
自分の環境で値を確認する手順
確認には、ホームページを見るアプリと、そのアプリに備わっている確認用の道具を使います。この記事では特定の製品や版に対象を固定していません。ブラウザやOSの版は利用する人によって異なり、版ごとの対応状況は公式資料の情報に沿って確認する必要があるためです。
開発者ツールの中にある入力画面を使います。短い命令を入力して、結果を文字で見る画面を「コンソール」といいます。
ホームページの状態を調べたり、短い命令を試したりするために、ブラウザに備わっている道具です。
次の手順は、ブラウザ上でJavaScriptを入力できる環境を使うものです。メニューや画面の表示名は、ブラウザや版によって異なることがあります。
- 使うブラウザを開き、任意のホームページを表示します。
- ブラウザのメニューから開発者ツールを開き、「コンソール」と書かれた画面を選びます。
- 入力欄に
screen.availTopと入力し、実行します。 - 続けて
typeof screen.availTopと入力し、実行します。
値の種類を調べる書き方がtypeofです。screen.availTopの前に付けると、値が数値として取得されているかを確認できます。
typeofとは？値の種類を調べるための書き方です。数を表す値の場合は、種類を示す文字として「number」が返ります。
undefinedは、値が用意されていないことを表す言葉です。
確認結果の読み方：typeof screen.availTopの表示が"number"なら、screen.availTopは数値として取得されています。"undefined"なら、この操作では数値を取得できていません。
実行結果の例：
0上の「0」は、値が0になる環境で表示される例です。利用する環境によっては、異なる数値が表示されます。
typeofの実行結果の例：
numberscreen.availTopが数値として取得できた場合の例です。値が用意されていない場合、typeof screen.availTopの結果は"undefined"になります。
画面に数値が表示された場合も、利用可能領域の上端を示す値として読み取ります。その値だけを見て、タスクバーの場所やモニタの上下配置を決めつけないでください。
パソコンの画面に表示される、アプリの起動や切り替えに使う帯状の部分です。画面のどこに表示されるかは、設定によって異なる場合があります。
値が0・数値・undefinedになるときの見方
値が0の場合
0も数値の一つです。画面上の基準位置と利用可能領域の上端が一致する場合には、上端の位置として0が返ります。ただし、0だけから、画面上部のメニューの有無やモニタの配置を特定することはできません。
0以外の数値の場合
0以外の数値も、利用可能領域の上端を示す値として扱います。複数のモニタがある環境でも、この値の正負だけを根拠に、別のモニタが上や下にあるとは判断できません。
undefinedの場合
値がundefinedなら、数値を取得できていません。この結果だけでは、ブラウザの対応状況や版、入力した場所など、どの要因によるものかを特定できません。
原因を調べるときは、次の順に条件をそろえてください。
- 入力した名前が
screen.availTopと完全に一致しているか確認する - 別のブラウザでも同じ手順を試し、ブラウザ名と版を記録する
- パソコンの種類やOSの版も記録し、条件を変えた結果を混同しない
- ブラウザの公式資料や、後述する資料で対応状況を確認する
別の条件で結果が変わった場合は、どの条件を変えたかと結果を一緒に記録してください。あるブラウザや版で得た結果を、別の環境にもそのまま当てはめないようにしましょう。
使う前に知っておきたい注意点
screen.availTopを使う前に、利用するブラウザと版での対応状況を公式資料で確認してください。- この値だけから、複数のモニタの配置や、ブラウザのウィンドウの位置を特定できるとは限りません。
- この値を使って画面の配置を決める場合は、値が取得できない環境での代わりの方法も用意してください。
- ブラウザや版ごとの差を確認するときは、製品名と版を特定して資料を参照してください。対象を固定していない環境すべての対応状況を、この記事だけで判断することはできません。
仕様と対応状況を確認する資料
次の資料では、値の定義や決まりの中での位置付け、ブラウザごとの対応状況を調べられます。利用するブラウザと版を特定して、対応状況の表や注意書きを確認してください。
CSS Object Modelの略です。ホームページの見た目に関する情報を、プログラムから扱えるように整理したものです。
Cascading Style Sheetsの略で、ホームページの色や文字の大きさなど、見た目を決めるための書き方です。
ブラウザの画面やウィンドウの位置・大きさなど、表示に関する決まりをまとめた文書です。
資料を読むときは、availTopの定義だけでなく、ブラウザと版ごとの対応状況や注意書きも確認しましょう。対応状況が資料から判断できない場合は、対応していると決めつけず、実際に使う環境で値を確かめてください。
よくある質問（FAQ）
screen.availTopが0になるのはなぜですか？
0は、利用可能領域の上端が画面上の基準位置と一致する場合の値です。0だけから、画面上部のメニューやモニタの配置を特定することはできません。
複数のモニタがあると、上側のモニタでは負の値になりますか？
screen.availTopの値から、モニタ同士の上下関係を判断することはできません。利用するブラウザと版の対応状況を資料で確認し、実際の環境でも値を確かめてください。
undefinedと表示されたら、どうすればよいですか？
入力した名前を確かめ、別のブラウザでも同じ手順を試してください。ブラウザ名と版、OSの版を記録し、公式資料で対応状況を調べます。
この値を使って、ブラウザのウィンドウを画面の上端に移動できますか？
screen.availTopは利用可能領域の上端を表す値であり、ウィンドウを移動する命令ではありません。この値だけでウィンドウを移動できるとはいえません。
まとめ
screen.availTopは、利用可能領域の上端を表す値です。- この値だけから、複数のモニタの上下配置は判断できません。
- 0は位置を示す数値ですが、それだけで環境の状態は特定できません。
undefinedの場合は、入力や利用環境を順に確認します。- ブラウザ名・版とOSの版を記録し、公式資料で対応状況を調べます。
画面に関する機能を順番に学ぶ場合は、次にJavaScript Screenロードマップ｜初心者が最短で画面情報APIを理解するためのガイドを確認しましょう。JavaScript全体の学習順序は、JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイドから確認できます。
