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

1 files changed, 124 insertions, 57 deletions

diff --git a/files/ja/web/api/element/getboundingclientrect/index.md b/files/ja/web/api/element/getboundingclientrect/index.md
index 69c2b2500a..ce2316632b 100644
--- a/files/ja/web/api/element/getboundingclientrect/index.md
+++ b/files/ja/web/api/element/getboundingclientrect/index.md
@@ -3,7 +3,7 @@ title: Element.getBoundingClientRect()
 slug: Web/API/Element/getBoundingClientRect
 tags:
   - API
-  - Boundary
+  - 境界
   - Bounding
   - Bounds
   - CSSOM View
@@ -12,101 +12,168 @@ tags:
   - DOM
   - Element
   - Enclosing
-  - Method
+  - メソッド
   - Minimum
-  - Rectangle
-  - Reference
+  - 長方形
+  - リファレンス
   - Smallest
   - clientHeight
   - getBoundingClientRect
   - getClientRects
   - offsetHeight
   - scrollHeight
-  - メソッド
+browser-compat: api.Element.getBoundingClientRect
 translation_of: Web/API/Element/getBoundingClientRect
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
+
+**`Element.getBoundingClientRect()`** メソッドは、要素の寸法と、その[ビューポート](/ja/docs/Glossary/Viewport)に対する相対位置に関する情報を返します。
 
-<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+domRect = element.getBoundingClientRect();
+```
 
-<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+### 値
 
-<h3 id="Value" name="Value">値</h3>
+返値は {{domxref("DOMRect")}} オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。 `width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。
 
-<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p>
+![](element-box-diagram.png)
 
-<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
+このメソッドが返す {{domxref("DOMRect")}} オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし [`box-sizing: border-box`](/ja/docs/Web/CSS/box-sizing) が要素に設定されていれば、これは `width` または `height` と等しくなります。
 
-<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p>
+返される値は、その要素に対して {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。
 
-<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p>
+空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 `width` と `height` が 0 で、 `top` と `left` は、要素に対する（コンテンツ順での）最初の CSS ボックスの左上である矩形を返します。
 
-<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p>
+境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に（その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界の辺 (`top`, `right`, `bottom`, `left`) が変更されることを意味しています。
 
-<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3>
+もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する `top` と `left` プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。
 
-<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p>
+### ブラウザー間で互換性のある代替手段
 
-<pre class="brush: js notranslate">// For scrollX
+高いブラウザー間の互換性を必要とするスクリプトでは、 `window.scrollX` と `window.scrollY` の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。
+
+```js
+// For scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
 // For scrollY
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
-</pre>
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+```
+
+## 例
+
+### 基本
+
+この単純な例では、単純な `<div>` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。
+
+```html
+<div></div>
+```
+
+```css
+div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+```
+
+```js
+let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}
+```
+
+{{EmbedLiveSample('Basic', '100%', 640)}}
+
+なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。
+
+また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。
+
+#### スクロール
+
+この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。
+
+```html
+<div id="example"></div>
+<div id="controls"></div>
+```
+
+```css
+div#example {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+
+body { padding-bottom: 1000px; }
+p { margin: 0; }
+```
+
+```js
+function update() {
+  const container = document.getElementById("controls");
+  const elem = document.getElementById("example");
+  const rect = elem.getBoundingClientRect();
+
+  container.innerHTML = '';
+  for (let key in rect) {
+    if(typeof rect[key] !== 'function') {
+      let para = document.createElement('p');
+      para.textContent  = `${ key } : ${ rect[key] }`;
+      container.appendChild(para);
+    }
+  }
+}
 
-<h2 id="Example" name="Example">例</h2>
+document.addEventListener('scroll', update);
+update();
+```
 
-<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
-var rect = obj.getBoundingClientRect();
-</pre>
+{{EmbedLiveSample('Scrolling', '100%', 640)}}
 
-<h2 id="Specification" name="Specification">仕様書</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-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">メモ</h3>
+### メモ
 
-<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p>
+最近のブラウザーでは返された `DOMRect` オブジェクトを変更することが可能ですが、これは `DOMRectReadOnly` を返す古いバージョンには該当しません。IE と Edge では、返された [`ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>) オブジェクトに対し、見過ごされたプロパティを追加することができず、`x` と `y` を補填することができません。
 
-<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p>
+互換性問題 (下記参照) のため、 `left`, `top`, `right`, `bottom` のみに頼ることが最も安全です。
 
-<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p>
+返された `DOMRect` オブジェクトのプロパティは、自身のプロパティではありません。`in` 演算子や `for...in` では返されたプロパティを見つけますが、他の `Object.keys()` のような API では失敗します。さらに予期しないことに、 `Object.assign()` のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。
 
-<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
+```js
+rect = elt.getBoundingClientRect()
 // emptyObj の結果は {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
 {width, ...emptyObj} = rect
-</pre>
+```
 
-<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> の各プロパティは他のプロパティ値から計算されます。</p>
+`DOMRect` の `top`, `left`, `right`, `bottom` の各プロパティは他のプロパティ値から計算されます。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
-</ul>
+- {{domxref("Element.getClientRects", "getClientRects()")}}
+- [MSDN: `getBoundingClientRect`](<https://msdn.microsoft.com/library/ms536433(VS.85).aspx>)
+- [MSDN: `ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>)、初期バージョンの `DOMRect`