From a4147eebad41ead6a4f810b520987bd7ff4875d8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 2 Jul 2021 23:29:20 +0900 Subject: /ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements を更新 (#1258) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版を正規版に統合 - 2021/02/12 時点の英語版に同期 --- .../dimensions-client.png | Bin 0 -> 10230 bytes .../dimensions-offset.png | Bin 0 -> 10553 bytes .../index.html | 24 ++++++++++----------- 3 files changed, 12 insertions(+), 12 deletions(-) create mode 100644 files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png create mode 100644 files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png new file mode 100644 index 0000000000..41fc540f11 Binary files /dev/null and b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png differ diff --git a/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png new file mode 100644 index 0000000000..aeaa276349 Binary files /dev/null and b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png differ diff --git a/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index 8dfa99f3c8..00a6f03efc 100644 --- a/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -15,29 +15,29 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements ---
{{DefaultAPISidebar("CSSOM View")}}
-

要素の幅と高さを決定するために調べることができるいくつかのプロパティがあり、どちらがニーズに適しているかを決定するのは難しい場合があります。 この記事は、あなたがその決定をするのを助けるように作られています。 これらのプロパティはすべて読み取り専用であることに注意してください。 要素の幅と高さを設定する場合は、{{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用します。

+

要素の幅と高さを決定するために見ることがあるプロパティはいくつかあり、どれがニーズに適しているかを特定するのが難しい場合があります。この記事は、その決定に役立つように作られています。これらのプロパティはすべて読み取り専用であることに注意してください。要素の幅と高さを設定する場合は、 {{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用してください。

-

それはどのくらいのスペースを使いますか？

+

どれくらいの空間を占めるのか

-

表示されているコンテンツの幅、スクロールバー（存在する場合）、パディング、ボーダーを含んだ、要素が占めるスペースの合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がない場合、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。 変換の場合、offsetWidth および offsetHeight は要素のレイアウトの幅と高さを返し、getBoundingClientRect() はレンダリングの幅と高さを返します。 例として、要素に width: 100px; と transform: scale(0.5); がある場合 getBoundingClientRect() は幅として 50 を返し、offsetWidth は 100 を返します。

+

表示されているコンテンツの幅、スクロールバー (存在する場合)、パディング、境界を含んだ、要素が占める空間の合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がなければ、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。変換がある場合、offsetWidth および offsetHeight は要素のレイアウトの幅と高さを返し、getBoundingClientRect() はレンダリングの幅と高さを返します。例として、要素に width: 100px; と transform: scale(0.5); がある場合 getBoundingClientRect() は幅として 50 を返し、offsetWidth は 100 を返します。

-

Image:Dimensions-offset.png

+

-

表示されるコンテンツのサイズは？

+

表示されるコンテンツの大きさ

-

パディングを含み、ボーダー、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占めるスペースを知る必要がある場合は、{{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。

+

パディングを含み、境界、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占める空間を知る必要がある場合は、 {{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。

-

Image:Dimensions-client.png

+

-

コンテンツの大きさはどれくらいですか？

+

コンテンツの大きさはどれくらいか

コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、{{DOMxRef("Element.scrollWidth")}} プロパティと {{DOMxRef("Element.scrollHeight")}} プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。

-

例えば、600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、scrollWidth は 600 を返し、scrollHeight は 400 を返します。

+

例えば、 600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、scrollWidth は 600 を返し、scrollHeight は 400 を返します。

-

関連情報

+

関連情報

-- cgit v1.2.3-54-g00ecf