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

1 files changed, 51 insertions, 64 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}}