2023/11/16 時点の英語版に基づき更新

files/ja/web/css/cssom_view/coordinate_systems/index.md

@@ -1,6 +1,8 @@
 ---
 title: 座標系
 slug: Web/CSS/CSSOM_view/Coordinate_systems
+l10n:
+  sourceCommit: b965392d6e4f2c897e914a3b69dec3e2a4212782
 ---
 
 {{CSSRef}}
@@ -15,141 +17,111 @@ slug: Web/CSS/CSSOM_view/Coordinate_systems
 
 ウェブ上では、既定の原点は与えられたコンテキストの左*上*隅です（正の Y 座標の値は原点より下になります）。これは、ほとんどの数学的モデルが原点を左*下*隅に置いており、正の Y 座標の値が原点よりも上を示すのとは異なることに注意してください。
 
-3D グラフィックスを描くとき、あるいは三次元を使ってオブジェクトを前から後ろに重ねるときには、 Z 座標も使われます。これは、正の場合は見る人から離れる方向、負の場合は見る人に近づく方向の距離を指定します。
+3つ目の次元を用いてオブジェクトを前から後ろに重ねる場合、 Z 軸を使用します。 Z 軸は、視聴者から画面の表面へと向かいます。CSS の z-index 属性は、位置を指定した要素がこの軸のどこに位置するかに影響し、見る人から遠ざかったり近づいたりする効果を与えます。
 
 > **メモ:** 実際には、これらの座標系の定義や方向は、 {{cssxref("transform")}} などの CSS プロパティを使って変更することができます。しかし、ここでは標準的な座標系についてだけ説明します。
 
 ## 標準 CSSOM 座標系
 
-以下の通り、 CSS オブジェクトモデルで使用される標準座標系が 4 つあります。
+CSS オブジェクトモデルで使用する 4 つの標準座標系があります。
+主要な座標系を支援するために、以下の図はビューポートの外にスクロールされたコンテンツを含むブラウザーウィンドウを持つモニターを表示させています。
+ビューポートの外にスクロールされたページコンテンツは、「ページ」座標の元がどこにあるかを示すために、ブラウザーウィンドウの上に半透過率で表示されています。
+「クライアント」、「ページ」、「ビューポート」座標系の原点が強調表示されています。
+
+![ビューポートの外側にコンテンツを含むブラウザーウィンドウを持つコンピューターモニターの図。ラベルは、ページ、画面、ビューポート座標の元を表示させます。](css-coords.svg)
 
 ### オフセット
 
 「オフセット」モデルを用いて指定される座標は、検査される要素またはイベントが発生した要素の左上隅を使用します。
 
 例えば、{{domxref("MouseEvent", "マウスイベント", "", 1)}}が発生すると、イベントの {{domxref("MouseEvent.offsetX", "offsetX")}} と {{domxref("MouseEvent.offsetY", "offsetY")}} 属性で指定されたマウスの位置は、イベントを配信したノードの左上の角に相対的に示されます。原点は {{cssxref("padding-left")}} と {{cssxref("padding-top")}} によって指定された距離だけ内側に置かれます。
 
-### クライアント
+### ビューポート
+
+「ビューポート」（または「クライアント」）座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。
 
-「クライアント」座標系は、イベントが発生したビューポートまたは閲覧コンテキストの左上隅を原点として使用します。これは文書が表示される表示領域全体です。スクロールは加味されません。
+例えばデスクトップコンピューターでは、 {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}} プロパティは、イベント発生時のマウスカーソルの位置を、 {{domxref("window")}} の左上角からの相対位置で示します。
+スタイラスやポインターを使用している場合、{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.clientX")}} と {{domxref("Touch.clientY")}} の座標は同じ原点からの相対座標です。
 
-例えばデスクトップコンピューターでは、 {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}} プロパティはイベント発生時のマウスカーソルの位置を、ブラウザーウィンドウの左上角からの相対位置で示しています。ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に (0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のクライアント座標が変化します。
+ウィンドウの左上隅は、文書の内容やスクロールの有無に関わらず、常に (0, 0) です。言い換えれば、文書をスクロールすると、文書内の任意の位置のビューポート座標が変化します。
 
 ### ページ
 
-「ページ」座標系は、ピクセルの位置を、そのピクセルが位置する {{domxref("Document")}} 全体の左上隅からの相対的な位置で指定します。つまり、文書内の要素のある点は、（直接的に位置を変えるか、間接的に他のコンテンツを追加したりサイズを変えたりすることで）その要素が移動しない限り、ページモデルにおいて同じ座標を維持することになります。
+「ページ」座標系は、レンダリングされた {{domxref("Document")}} 全体の左上隅からの相対ピクセル位置を与えます。
+つまり、文書内の要素のこの点は、レイアウト変更によって要素が移動しない限り、ユーザーが文書内を水平または垂直にスクロールしても同じ座標になります。
 
 マウスイベントの {{domxref("MouseEvent.pageX", "pageX")}} と {{domxref("MouseEvent.pageY", "pageY")}} 属性は、イベントが発生した時のマウスの位置を、文書の左上隅を基準として提供するものです。
+{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}} の座標は同じ原点からの相対座標です。
 
 ### スクリーン
 
-最後に、「スクリーン」モデルについてです。これは、ユーザーの画面全体の左上隅を原点とする座標系であることは、おそらく明白でしょう。つまり、例えばウィンドウを移動したり、ユーザーの画面形状を変更したり（ディスプレイの解像度を変更したり、システムにモニターを追加または削除したり）すると、文書内のある点の位置が変化することになります。
-
+最後に、「スクリーン」モデルについて説明します。これは、ユーザーの画面空間の左上を原点とするものです。
+この座標系の各点は、単一の論理ピクセルを表しますので、値は各軸に沿っ て整数値で増加したり減少したりします。
+文書内の指定された点の位置は、例えば格納されているウィンドウが移動された場合や、ユーザーの画面形状が変更された場合（ディスプレイの解像度が変更された場合や、システムにモニターが追加・除去された場合）などに変化します。
 {{domxref("MouseEvent.screenX")}} と {{domxref("MouseEvent.screenY")}} プロパティは、画面の原点を基準としたマウスイベントの位置の座標を示します。
+{{domxref("TouchEvent", "タッチイベント", "", 1)}}における {{domxref("Touch.screenX")}} と {{domxref("Touch.screenY")}} の座標は同じ原点からの相対座標です。
+
 
 ## 例
 
-では、例を見てみましょう。この単純な例では、入れ子になったボックスのセットを作成します。マウスが内側のボックスに入ったり、内側を移動したり、外側に出たりするたびに、対応するイベントがボックス内の情報メッセージのセットを更新して処理され、利用可能な 4 つの座標系それぞれにおける現在のマウス座標が一覧表示されます。
+要素内のマウス座標をログ出力する例を見ていきましょう。
+マウスが内側のボックスに入ったり、内側を移動したり、内側から出たりするたびに、利用できる 4 つのシステムのそれぞれで現在のマウス座標をログ出力することで、イベントが処理されます。
 
 ### JavaScript
 
-スクリプトを 2 つの部分に分けて見てみましょう。まず、座標を画面に記録するコード。このコードは、私たちが見ている様々なマウスイベントのイベントハンドラーから呼ばれることになります。
-
-#### 座標を表示
-
-HTML を見ればわかるように、内側のボックス（イベントを監視しているボックス）には、これからレポートする 4 つの座標系ごとにいくつかの段落が含まれています。
-
-```js
-let inner = document.querySelector(".inner");
-let log = document.querySelector(".log");
-
-function setCoords(e, type) {
-  let idX = type + "X";
-  let idY = type + "Y";
-
-  document.getElementById(idX).innerText = e[idX];
-  document.getElementById(idY).innerText = e[idY];
-}
-```
-
-座標情報を表示する段落を含む内側のボックスにある {{HTMLElement("div")}} への参照が `log` に取得されます。
-
-`setCoords()` 関数は、入力として {{domxref("MouseEvent")}} と座標を取得するときに使用する原点の名前を受け取るように設計されています。そして、その実装は非常にシンプルです。変数 `idX` と `idY` には、指定された座標系における座標に対応するプロパティの名前が文字列として設定されます。例えば、 `type` の値が `"page"` であれば、 `idX` は `"pageX"` となり、 `idY` は `"pageY"` となります。
-
-#### マウスイベントの取り扱い
-
-`setCoords()` は様々なマウスイベントのイベントハンドラー、 `update()` から呼び出されます。以下のようなものです。
+JavaScript では、コードは {{domxref("EventTarget.addEventListener", "addEventListener()")}} を呼び出して、 inner ボックスに {{domxref("Element/mouseenter_event", "mouseenter")}}、{{domxref("Element/mousemove_event", "mousemove")}}、{{domxref("Element/mouseleave_event", "mouseleave")}} のイベントハンドラーを設定します。
+それぞれのイベントに対して `setCoords()` 関数を呼び出して、`<p>` 要素の内部テキストに各システムの座標を設定しています。
 
 ```js
-function update(e) {
-  setCoords(e, "offset");
-  setCoords(e, "client");
-  setCoords(e, "page");
-  setCoords(e, "screen");
+const log = document.querySelector(".log");
+const inner = document.querySelector(".inner");
+
+function setCoords(e) {
+  log.innerText = `
+    オフセット X/Y: ${e.screenX}, ${e.screenY}
+    ビューポート X/Y: ${e.clientX}, ${e.clientY}
+    ページ X/Y: ${e.pageX}, ${e.pageY}
+    スクリーン X/Y: ${e.screenX}, ${e.screenY}`;
 }
 
-inner.addEventListener("mouseenter", update, false);
-inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);
+inner.addEventListener("mousemove", setCoords);
+inner.addEventListener("mouseenter", setCoords);
+inner.addEventListener("mouseleave", setCoords);
 ```
 
-イベントハンドラーは `update()` メソッドの中にあります。これはそれぞれの座標系ごとに、 `setCoords()` を 1 回ずつ呼び出し、発行されたイベントを渡します。
-
-メインコードでは、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を {{domxref("Element/mouseenter_event", "mouseenter")}}、{{domxref("Element/mousemove_event", "mousemove")}}、{{domxref("Element/mouseleave_event", "mouseleave")}} の各種別に対して呼び出し、内側のボックス上にイベントハンドラーをセットアップしています。
-
 ### HTML
 
-この例の HTML は以下の通りです。なお、 ID が `"log"` である `<div>` の中で、それぞれの座標系ごとに段落があり、各モデルの座標を受け取って表示するための要素に {{HTMLElement("span")}} が使用されていることに注意してください。
+HTML は `"log"` クラスを持つ `<p>` を収めており、マウスイベントのデータを表示します。
 
 ```html
 <div class="outer">
   <div class="inner">
-    <div class="log">
-      <p>
-        Offset-relative: <span id="offsetX">0</span>,
-        <span id="offsetY">0</span>
-      </p>
-      <p>
-        Client-relative: <span id="clientX">0</span>,
-        <span id="clientY">0</span>
-      </p>
-      <p>
-        Page-relative: <span id="pageX">0</span>,
-        <span id="pageY">0</span>
-      </p>
-      <p>
-        Screen-relative: <span id="screenX">0</span>,
-        <span id="screenY">0</span>
-      </p>
-    </div>
+    <p class="log">この部分にマウスオーバーすると座標が表示されます</p>
   </div>
 </div>
 ```
 
 ### CSS
 
-CSS はここではほとんど見栄えのためのものです。クラス `"outer"` は、 MDN ウィンドウで表示するために意図的に幅を広くして、水平方向にスクロールできるようにした包含ボックスに使用されています。 `"inner"` ボックスはイベントを追跡するためのもので、マウス座標を表示します。
+コンテンツを含むボックスのクラス `"outer"` は、コンテンツをスクロールさせたときのマウス座標の影響を見るために、意図的に幅を広くしています。
+`"inner"` の段落はマウスイベントを記録する場所です。
 
 ```css
 .outer {
   width: 1000px;
-  height: 200px;
-  background-color: red;
 }
 
 .inner {
+  font-family: monospace;
   position: relative;
   width: 500px;
   height: 150px;
   top: 25px;
   left: 100px;
-  background-color: blue;
+  background-color: darkblue;
   color: white;
   cursor: crosshair;
   user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
 }
 
 .log {
@@ -161,16 +133,22 @@ CSS はここではほとんど見栄えのためのものです。クラス `"o
 
 ### 結果
 
-ここでは、その結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値が、値を取得できる様々な座標系で変化する様子をご覧ください。また、この例を水平方向にスクロールさせると、返される値が変化するものの、 `clientX` の値が変化しないことに注意してください。
+この結果を実際に見てみましょう。青いボックスの中をマウスで移動しながら、マウスの X 座標と Y 座標の値がさまざまな座標系で変化する様子をご覧ください。
 
 {{EmbedLiveSample("Example", 600, 250)}}
 
 ## 関連情報
 
-- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms): 座標系を変更する方法
-- マウスイベントの座標:
+- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_transforms/Using_CSS_transforms): 座標系を変更する方法
+- {{domxref("MouseEvent", "マウスイベント", "", 1)}}の座標:
 
   - {{domxref("MouseEvent.offsetX")}} と {{domxref("MouseEvent.offsetY")}}
   - {{domxref("MouseEvent.clientX")}} と {{domxref("MouseEvent.clientY")}}
   - {{domxref("MouseEvent.pageX")}} と {{domxref("MouseEvent.pageY")}}
   - {{domxref("MouseEvent.screenX")}} と {{domxref("MouseEvent.screenY")}}
+
+- {{domxref("Touch", "タッチイベント")}}の座標:
+
+  - {{domxref("Touch.clientX")}} と {{domxref("Touch.clientY")}}
+  - {{domxref("Touch.pageX")}} と {{domxref("Touch.pageY")}}
+  - {{domxref("Touch.screenX")}} と {{domxref("Touch.screenY")}}