Web/API/Window/screenX/Y を更新 (#1027)

- 英語版章題マクロを除去
- 2021/02/20 時点の英語版に同期

2 files changed, 178 insertions, 43 deletions

diff --git a/files/ja/web/api/window/screenx/index.html b/files/ja/web/api/window/screenx/index.html
index 45bfb13f65..bfbfec9e92 100644
--- a/files/ja/web/api/window/screenx/index.html
+++ b/files/ja/web/api/window/screenx/index.html
@@ -1,29 +1,97 @@
 ---
-title: window.screenX
+title: Window.screenX
 slug: Web/API/Window/screenX
 tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
+- API
+- CSSOM View
+- Property
+- Read-only
+- Reference
+- Window
+- screenX
 translation_of: Web/API/Window/screenX
 ---
-<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>画面の左端からユーザのブラウザの左端までの水平距離を返します。</p>
-<p>{{ 英語版章題("Syntax") }}</p>
-<h3 id="Syntax">構文</h3>
-<pre class="eval"><i>lLoc</i> = window.screenX
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.screenX</strong></code> は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートから画面の左端までの水平距離を CSS ピクセル数で返します。</p>
+
+<div class="notecard note">
+  <p><strong>注</strong>: <code>screenX</code> の別名である {{domxref("Window.screenLeft")}} が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em>leftWindowPos</em> = window.screenX
 </pre>
-<p>{{ 英語版章題("Parameters") }}</p>
-<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3>
+
+<h3 id="Returns">返値</h3>
+
+<p>ブラウザーのビューポートの左端から画面の左端までの CSS ピクセル数に等しい数値です。</p>
+
+<h2 id="Examples">例</h2>
+
+<p><a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> (<a href="https://github.com/mdn/dom-examples/blob/master/screenleft-screentop/index.html">ソースコード</a>) の例では、円が描かれたキャンバスを見ることができます。この例では、 {{domxref("Window.screenLeft")}}/{{domxref("Window.screenTop")}} に加えて {{domxref("Window.requestAnimationFrame()")}} を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。</p>
+
+<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);</pre>
+
+<p>これは <code>screenX</code>/<code>screenY</code> でもまったく同じように動作します。</p>
+
+<p>また、このコードでは <code>screenLeft</code> に対応しているかどうかを検出するスニペットが入っており、対応していない場合は <code>screenLeft</code>/<code>screenTop</code> を
+  <code>screenX</code>/<code>screenY</code> で代替するようになっています。</p>
+
+<pre class="brush: js">if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+  <thead>
+    <tr>
+      <th scope="col">仕様書</th>
+      <th scope="col">状態</th>
+      <th scope="col">備考</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+      <td>{{ Spec2('CSSOM View') }}</td>
+      <td>初回定義</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Window.screenX")}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
 <ul>
- <li><code>lLoc</code> は、画面の左端からのピクセル数です。</li>
+  <li>{{domxref("window.screenLeft")}}</li>
+  <li>{{domxref("Window.screenY")}}</li>
 </ul>
-<p>{{ 英語版章題("Notes") }}</p>
-<h3 id="Notes">注</h3>
-<p><a href="ja/Window.screenY">window.screenY</a> も参照してください。</p>
-<p>{{ 英語版章題("Specification") }}</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p>{{ DOM0() }}</p>
diff --git a/files/ja/web/api/window/screeny/index.html b/files/ja/web/api/window/screeny/index.html
index 3b10d2b446..1675e654f1 100644
--- a/files/ja/web/api/window/screeny/index.html
+++ b/files/ja/web/api/window/screeny/index.html
@@ -1,29 +1,96 @@
 ---
-title: window.screenY
+title: Window.screenY
 slug: Web/API/Window/screenY
 tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
+  - API
+  - CSSOM View
+  - Property
+  - Read-only
+  - Reference
+  - Window
 translation_of: Web/API/Window/screenY
 ---
-<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>画面の上端からユーザのブラウザの上端までの垂直距離を返します。</p>
-<p>{{ 英語版章題("Syntax") }}</p>
-<h3 id="Syntax">構文</h3>
-<pre class="eval"><i>lLoc</i> = window.screenY
-</pre>
-<p>{{ 英語版章題("Parameters") }}</p>
-<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3>
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.screenY</strong></code> は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。</p>
+
+<div class="notecard note">
+  <p><strong>注</strong>: <code>screenY</code> の別名である {{domxref("Window.screenTop")}} が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><em><var>topWindowPos</var> = window.screenY
+</em></pre>
+
+<h3 id="Returns">返値</h3>
+
+<p>ブラウザーのビューポートの上端から画面の上端までの CSS ピクセル数に等しい数値です。</p>
+
+<h2 id="Examples">例</h2>
+
+<p><a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> の例では、円が描かれたキャンバスを見ることができます。この例では、 {{domxref("Window.screenLeft")}}/{{domxref("Window.screenTop")}} に加えて {{domxref("Window.requestAnimationFrame()")}} を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。</p>
+
+<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);</pre>
+
+<p>これは <code>screenX</code>/<code>screenY</code> でもまったく同じように動作します。</p>
+
+<p>また、このコードでは <code>screenLeft</code> に対応しているかどうかを検出するスニペットが入っており、対応していない場合は <code>screenLeft</code>/<code>screenTop</code> を
+  <code>screenX</code>/<code>screenY</code> で代替するようになっています。</p>
+
+<pre class="brush: js">if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screeny', 'Window.screenY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Window.screenY")}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
 <ul>
- <li><code>lLoc</code> は、画面の上からのピクセル数です。</li>
+ <li>{{domxref("window.screenTop")}}</li>
+ <li>{{domxref("window.screenX")}}</li>
 </ul>
-<p>{{ 英語版章題("Notes") }}</p>
-<h3 id="Notes">注</h3>
-<p><a href="ja/DOM/window.screenX">window.screenX</a> も参照してください。</p>
-<p>{{ 英語版章題("Specification") }}</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p>{{ DOM0() }}</p>