2022/02/07 時点の英語版に同期

2 files changed, 141 insertions, 136 deletions

diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md
index 4a593af238..0d7dc3bbb4 100644
--- a/files/ja/web/api/element/scrollleft/index.md
+++ b/files/ja/web/api/element/scrollleft/index.md
@@ -4,58 +4,59 @@ slug: Web/API/Element/scrollLeft
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollLeft
 translation_of: Web/API/Element/scrollLeft
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p>
+**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。
 
-<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p>
+要素の {{cssxref("direction")}} が `rtl` (right-to-left、右書き) の場合、 `scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。
 
-<div class="blockIndicator warning">
-<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p>
-</div>
+> **Warning:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3>
+### 値の取得
 
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <em>sLeft</em> = <em>element</em>.scrollLeft;
-</pre>
+```js
+// スクロールしたピクセル数を取得
+var sLeft = element.scrollLeft;
+```
 
-<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p>
+`sLeft` は `element` が左端からスクロールしたピクセル数を整数で表現したものです。
 
-<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3>
+### 値の設定
 
-<pre class="syntaxbox">// スクロールしたピクセル数を設定
-<em>element</em>.scrollLeft = 10;
-</pre>
+```js
+// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+```
 
-<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p>
+`scrollLeft` は任意の整数値で設定することができます。しかし、
 
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li>
-</ul>
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が `0` より小さかったら (右書きの要素では `0` より大きかったら)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div id="content"&gt;ボタンをクリックすると右にスライドします。&lt;/div&gt;
-&lt;/div&gt;
+```html
+<div id="container">
+  <div id="content">ボタンをクリックすると右へスライドします。</div>
+</div>
 
-&lt;button id="slide" type="button"&gt;右へスライド&lt;/button&gt;</pre>
+<button id="slide" type="button">右へスライド</button>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   width: 100px;
   height: 100px;
   border: 1px solid #ccc;
@@ -65,47 +66,33 @@ var <em>sLeft</em> = <em>element</em>.scrollLeft;
 #content {
   width: 250px;
   background-color: #ccc;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const button = document.getElementById('slide');
+```js
+const button = document.getElementById('slide');
 
 button.onclick = function () {
   document.getElementById('container').scrollLeft += 20;
-};</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollLeft")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollTop")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
+};
+```
+
+### 結果
+
+{{EmbedLiveSample("Example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollTop")}}
+- {{domxref("Element.scrollTo()")}}
diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md
index 21f8478a46..898f8cc7bb 100644
--- a/files/ja/web/api/element/scrolltop/index.md
+++ b/files/ja/web/api/element/scrolltop/index.md
@@ -6,87 +6,105 @@ tags:
   - CSSOM View
   - NeedsArtUpdate
   - NeedsMarkupWork
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollTop
 translation_of: Web/API/Element/scrollTop
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p>
+**`Element.scrollTop`** プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
 
-<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p>
+要素の `scrollTop` の値は、要素の上から最も上の*表示されている*コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 `scrollTop` の値は `0` になります。
 
-<p><code>scrollTop</code> がルート要素 (<code>&lt;html&gt;</code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p>
+`scrollTop` がルート要素 (`<html>` 要素) に対して使用されると、ウィンドウの `scrollY` が返されます。[これは `scrollTop` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop)。
 
-<div class="warning">
-<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p>
-</div>
+> **Warning:** 画面の拡大縮小を使用するシステムでは、 `scrollTop` が小数になることがあります。
+
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+```
 
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <var>intElemScrollTop</var> = someElement.scrollTop;
-</pre>
+このコードを実行した後、 `intElemScrollTop` はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。
 
-<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p>
+```js
+// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+```
 
-<pre class="brush: js">// スクロールするピクセル数を設定
-<var>element</var>.scrollTop = <var>intValue</var>;
-</pre>
+`scrollTop` は任意の整数値で設定することができます。しかし、
 
-<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p>
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "**non-scrollable**" のプロパティがある場合)、 `scrollTop` は `0` に設定されます。
+- `scrollTop` は負の数には対応していません。代わりに、 `0` に戻ります。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollTop` は最大値に設定されます。
 
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li>
- <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li>
-</ul>
+## 例
 
-<h2 id="Example" name="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>
-<em><strong>If you can see this, scrollTop = 0</strong></em>
+この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、 `scrollTop` の値がどのように変わるかを確認してください。
 
-<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>
-<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
+#### HTML
 
-<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>
-<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
+```html
 
-<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 id="container">
+  <div id="scroller">
+      <p>Far out in the uncharted backwaters of the unfashionable end
+      of the western spiral arm of the Galaxy lies a small unregarded
+      yellow sun. Orbiting this at a distance of roughly ninety-two million
+      miles is an utterly insignificant little blue green planet whose
+      ape-descended life forms are so amazingly primitive that they still
+      think digital watches are a pretty neat idea.</p>
+  </div>
 </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" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollTop")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollLeft")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
+
+<div id="output">scrollTop: 0</div>
+```
+
+#### CSS
+
+```css
+#scroller {
+  overflow: scroll;
+  height: 150px;
+  width: 150px;
+  border: 5px dashed orange;
+}
+
+#output {
+  padding: 1rem 0;
+}
+```
+
+#### JavaScript
+
+```js
+const scroller = document.querySelector("#scroller");
+const output = document.querySelector("#output");
+
+scroller.addEventListener("scroll", event => {
+  output.textContent = `scrollTop: ${scroller.scrollTop}`;
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("Scrolling_an_element", 400, 250)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollLeft")}}
+- {{domxref("Element.scrollTo()")}}