Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

2 files changed, 73 insertions, 86 deletions

diff --git a/files/ja/web/api/element/clientleft/index.html b/files/ja/web/api/element/clientleft/index.html
deleted file mode 100644
index 7a17600640..0000000000
--- a/files/ja/web/api/element/clientleft/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Element.clientLeft
-slug: Web/API/Element/clientLeft
-tags:
-- API
-- CSSOM View
-- NeedsAgnostify
-- NeedsMarkupWork
-- Property
-- Reference
-browser-compat: api.Element.clientLeft
-translation_of: Web/API/Element/clientLeft
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
-
-<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>
-
-<div class="note">
-	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-	</p>
-</div>
-
-<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>
-
-<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>
-</div>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="Notes">注</h2>
-
-<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-
-<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>
diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
new file mode 100644
index 0000000000..0f7ccf8fb9
--- /dev/null
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -0,0 +1,73 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+{{ APIRef("DOM") }}
+
+要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 `clientLeft` は、左マージンまたは左パディングを含みません。 `clientLeft` は読み取り専用です。
+
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+
+> **Note:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
+
+## 構文
+
+```js
+var left = element.clientLeft;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 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-left: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Example", 400, 350)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}