このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
座標系
グラフィックのコンテキストでピクセルの位置を指定する場合（ちょうど代数学で座標系を指定する場合と同様）、その位置はコンテキスト内の固定点を基準として定義されます。この固定点は原点と呼ばれています。位置は、コンテキストの各次元に沿った原点からのピクセル単位のオフセットで指定されます。
このガイドでは、 CSS オブジェクトモデルで使われる標準的な座標系を説明します。これらは一般に、原点がどこにあるかという点でのみ異なっています。
座標軸
ウェブ技術で使われる座標系では、水平方向のオフセットを「X 座標」と呼び、負の値は原点より左に、正の値は原点より右に位置することを示します。「Y 座標」は垂直方向のオフセットを指定し、負の値は原点より上、正の値は原点より下にあることを示します。
ウェブ上では、既定の原点は与えられたコンテキストの左上隅です（正の Y 座標の値は原点より下になります）。これは、ほとんどの数学的モデルが原点を左下隅に置いており、正の Y 座標の値が原点よりも上を示すのとは異なることに注意してください。
3 つ目の次元を用いてオブジェクトを前から後ろに重ねる場合、Z 軸を使用します。 Z 軸は、視聴者から画面の表面へと向かいます。CSS のz-index プロパティ値は、位置を指定した要素がこの軸のどこに位置するかに影響し、見る人から遠ざかったり近づいたりする効果を与えます。
メモ:これらの座標系の定義や方向は、transform などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。
標準 CSSOM 座標系
CSS オブジェクトモデルで使用する 4 つの標準座標系があります。主要な座標系を支援するために、以下の図はビューポートの外にスクロールされたコンテンツを含むブラウザーウィンドウを持つモニターを表示させています。ビューポートの外にスクロールされたページコンテンツは、「ページ」座標の元がどこにあるかを示すために、ブラウザーウィンドウの上に半透過率で表示されています。「クライアント」、「ページ」、「ビューポート」座標系の原点が強調表示されています。
オフセット
「オフセット」モデルを用いて指定される座標は、検査される要素またはイベントが発生した要素の左上隅を使用します。
例えば、マウスイベントが発生すると、イベントのoffsetX とoffsetY 属性で指定されたマウスの位置は、イベントを配信したノードの左上の角に相対的に示されます。原点はパディング領域と境界領域の間、パディング辺だけ内側にずらされます。
ビューポート
「ビューポート」（または「クライアント」）座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。
例えばデスクトップコンピューターでは、MouseEvent.clientX とMouseEvent.clientY プロパティは、イベント発生時のマウスカーソルの位置を、Window の左上角からの相対位置で示します。スタイラスやポインターを使用している場合、タッチイベントにおけるTouch.clientX とTouch.clientY の座標は同じ原点からの相対座標です。
ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に(0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のビューポート座標が変化します。
ページ
「ページ」座標系は、レンダリングされたDocument 全体の左上隅からの相対ピクセル位置を与えます。つまり、文書内の要素のこの点は、レイアウト変更によって要素が移動しない限り、ユーザーが文書内を水平または垂直にスクロールしても同じ座標になります。
マウスイベントのpageX とpageY 属性は、イベントが発生した時のマウスの位置を、文書の左上隅を基準として提供するものです。タッチイベントにおけるTouch.pageX とTouch.pageY の座標は同じ原点からの相対座標です。
画面
最後に、「画面」モデルについて説明します。これは、ユーザーの画面空間の左上を原点とするものです。この座標系の各点は、単一の論理ピクセルを表しますので、値は各軸に沿って整数値で増加したり減少したりします。文書内の指定された点の位置は、例えば格納されているウィンドウが移動された場合や、ユーザーの画面形状が変更された場合（ディスプレイの解像度が変更された場合や、システムにモニターが追加・除去された場合）などに変化します。MouseEvent.screenX とMouseEvent.screenY プロパティは、画面の原点を基準としたマウスイベントの位置の座標を示します。タッチイベントにおけるTouch.screenX とTouch.screenY の座標は同じ原点からの相対座標です。
例
要素内のマウス座標をログ出力する例を見ていきましょう。マウスが内側のボックスに入ったり、内側を移動したり、内側から出たりするたびに、利用できる 4 つのシステムのそれぞれで現在のマウス座標をログ出力することで、イベントが処理されます。
JavaScript
JavaScript では、コードはaddEventListener() を呼び出して、 inner ボックスにmouseenter、mousemove、mouseleave のイベントハンドラーを設定します。それぞれのイベントに対してsetCoords() 関数を呼び出して、<p> 要素の内部テキストに各システムの座標を設定しています。
const log = document.querySelector(".log");const inner = document.querySelector(".inner");function setCoords(e) { log.innerText = ` オフセット X/Y: ${e.offsetX}, ${e.offsetY} ビューポート X/Y: ${e.clientX}, ${e.clientY} ページ X/Y: ${e.pageX}, ${e.pageY} 画面 X/Y: ${e.screenX}, ${e.screenY}`;}inner.addEventListener("mousemove", setCoords);inner.addEventListener("mouseenter", setCoords);inner.addEventListener("mouseleave", setCoords);HTML
HTML は"log" クラスを持つ<p> を収めており、マウスイベントのデータを表示します。
<div> <div> <p>この部分にマウスオーバーすると座標が表示されます</p> </div></div>CSS
コンテンツを含むボックスのクラス"outer" は、コンテンツをスクロールさせたときのマウス座標の影響を見るために、意図的に幅を広くしています。"inner" の段落はマウスイベントを記録する場所です。
.outer { width: 1000px;}.inner { font-family: monospace; position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: darkblue; color: white; cursor: crosshair; user-select: none;}.log { position: relative; width: 100%; text-align: center;}結果
この結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値がさまざまな座標系で変化する様子をご覧ください。