From ca55873ca4111d181456845e6c18a8eadc65c3a1 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 1 Jan 2022 01:03:23 +0900
Subject: 2021/11/05 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/mouseevent/clientx/index.md | 113 +++++++++++++--------------
 1 file changed, 53 insertions(+), 60 deletions(-)

(limited to 'files/ja/web/api')

diff --git a/files/ja/web/api/mouseevent/clientx/index.md b/files/ja/web/api/mouseevent/clientx/index.md
index 3c4bdf53b2..987853f6f6 100644
--- a/files/ja/web/api/mouseevent/clientx/index.md
+++ b/files/ja/web/api/mouseevent/clientx/index.md
@@ -1,74 +1,67 @@
 ---
 title: MouseEvent.clientX
 slug: Web/API/MouseEvent/clientX
+tags:
+  - API
+  - CSSOM View
+  - DOM
+  - DOM イベント
+  - MouseEvent
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+browser-compat: api.MouseEvent.clientX
 translation_of: Web/API/MouseEvent/clientX
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p><strong><code>MouseEvent.clientX</code></strong> は event の起きた点の、クライアント内での X 座標を参照できる読み取り専用の属性です。画面の左上でクリックした場合、ページの横スクロール位置に関わらず、その値は 0 となります。</p>
+**`clientX`** は {{domxref("MouseEvent")}} の読み取り専用のプロパティで、このイベントが発生した時点のアプリケーションの{{glossary("viewport", "ビューポート")}}における水平座標を定義します（ページにおける座標ではありません）。
 
-<h2 id="記法">記法</h2>
+例えば、ビューポートの左端をクリックすると、そのページが水平方向にスクロールしているかどうかにかかわらず、常に `clientX` の値が `0` のマウスイベントが発生します。
 
-<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
-</pre>
+## 値
 
-<h3 id="返り値">返り値</h3>
+`double` の浮動小数点値です。
 
-<p>数値</p>
+## 例
 
-<h2 id="Example" name="Example">使用例</h2>
+この例では、 {{domxref("Element/mousemove_event", "mousemove")}} イベントが発生するたびに、マウスの座標を表示します。
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;clientX\clientY example&lt;/title&gt;
+### HTML
 
-&lt;script&gt;
-function showCoords(evt){
-  alert(
-    "clientX value: " + evt.clientX + "\n" +
-    "clientY value: " + evt.clientY + "\n"
-  );
+```html
+<p>マウスを動かして位置を確認してください。</p>
+<p id="screen-log"></p>
+```
+
+### JavaScript
+
+```js
+let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
 }
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body onmousedown="showCoords(event)"&gt;
-&lt;p&gt;To display the mouse coordinates click anywhere on the page.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状態</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>{{SpecName('DOM2 Events')}} からの変更はなし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>最初の定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2>
-
-<p>{{Compat("api.MouseEvent.clientX")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{ domxref("MouseEvent") }}</li>
- <li>{{domxref("event.clientY","clientY")}}</li>
- <li>{{domxref("event.screenX","screenX")}} / {{domxref("event.screenY","screenY")}}</li>
-</ul>
+```
+
+### 結果
+
+{{EmbedLiveSample("Example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ domxref("MouseEvent") }}
+- {{domxref("MouseEvent.clientY","clientY")}}
+- {{domxref("MouseEvent.screenX","screenX")}} /
+  {{domxref("MouseEvent.screenY","screenY")}}
-- 
cgit v1.2.3-54-g00ecf