2022/01/25 時点の英語版に同期

2 files changed, 123 insertions, 96 deletions

diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
index 7a17600640..0f7ccf8fb9 100644
--- a/files/ja/web/api/element/clientleft/index.md
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -2,85 +2,72 @@
 title: Element.clientLeft
 slug: Web/API/Element/clientLeft
 tags:
-- API
-- CSSOM View
-- NeedsAgnostify
-- NeedsMarkupWork
-- Property
-- Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.clientLeft
 translation_of: Web/API/Element/clientLeft
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
+要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 `clientLeft` は、左マージンまたは左パディングを含みません。 `clientLeft` は読み取り専用です。
 
-<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<div class="note">
-	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-	</p>
-</div>
+> **Note:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
 
-<p style="height: 5px !important; margin: 0px;"></p>
+## 構文
 
-<div class="note">
-	<p><strong>注:</strong> 要素に
-		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
-</div>
+```js
+var left = element.clientLeft;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
 
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
-</pre>
-
-<h2 id="Example">例</h2>
-
-<div id="offsetContainer"
-	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-	<div id="idDiv"
-		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-		<p id="PaddingTopLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-top</p>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-		</p>
-
-		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-			culpa qui officia deserunt mollit anim id est laborum.</p>
-
-		<p id="PaddingBottomLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-bottom</p>
-	</div>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
-	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
 </div>
+```
 
-<h2 id="Specifications">仕様書</h2>
+### CSS
 
-{{Specifications}}
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+#contained {
+  margin: 1rem;
+  border-left: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
 
-<p>{{Compat}}</p>
+### 結果
 
-<h2 id="Notes">注</h2>
+{{EmbedLiveSample("Example", 400, 350)}}
 
-<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
+## 仕様書
+
+{{Specifications}}
 
-<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
+## ブラウザーの互換性
 
-<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
-	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md
index 95ae5ad2b3..1438ca59a4 100644
--- a/files/ja/web/api/element/clienttop/index.md
+++ b/files/ja/web/api/element/clienttop/index.md
@@ -1,37 +1,77 @@
 ---
-title: element.clientTop
+title: Element.clientTop
 slug: Web/API/Element/clientTop
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientTop
 translation_of: Web/API/Element/clientTop
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p>
-<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop;
-</pre>
-<h2 id="Example" name="Example">例</h2>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{mediawiki.external('endif')}}</span></div>
-<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>W3C の仕様の一部ではありません。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-<h2 id="References" name="References">リファレンス</h2>
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
-</ul>
+{{ APIRef("DOM") }}
+
+要素の上境界の幅をピクセル数で表します。これは要素の読み取り専用で整数型のプロパティです。
+
+たまたま、 2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。
+
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+
+## 構文
+
+```js
+var top = element.clientTop;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-top` が 24px の黒になっています。 `clientTop` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
+
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
+
+#contained {
+  margin: 1rem;
+  border-top: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Example", 400, 350)}}
+
+## メモ
+
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}