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 時点の英語版に同期 --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 17 ++--------- .../index.html | 32 --------------------- .../dimensions-client.png | Bin 0 -> 10230 bytes .../dimensions-offset.png | Bin 0 -> 10553 bytes .../index.html | 24 ++++++++-------- 6 files changed, 16 insertions(+), 59 deletions(-) delete mode 100644 files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html 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') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 9561b4b02a..3fe7824f51 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1991,7 +1991,7 @@ /ja/docs/DebNews/20081118 /ja/docs/orphaned/DevNews/20081118 /ja/docs/Deer_Park /ja/docs/Mozilla/Firefox/Releases/1.5 /ja/docs/Detecting_device_orientation /ja/docs/Web/Events/Detecting_device_orientation -/ja/docs/Determining_the_dimensions_of_elements /ja/docs/conflicting/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +/ja/docs/Determining_the_dimensions_of_elements /ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements /ja/docs/DevNews /ja/docs/orphaned/DevNews /ja/docs/DevNews/20060705 /ja/docs/orphaned/DevNews/20060705 /ja/docs/DevNews/20060706 /ja/docs/orphaned/DevNews/20060706 diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 7b31ae8569..043e4a134c 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -10965,7 +10965,9 @@ "Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements": { "modified": "2020-07-24T22:56:12.511Z", "contributors": [ - "Wind1808" + "Wind1808", + "SphinxKnight", + "yuki_nichiyama" ] }, "Web/API/CSS_Object_Model/Managing_screen_orientation": { @@ -48601,19 +48603,6 @@ "dextra" ] }, - "conflicting/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements": { - "modified": "2019-03-18T20:59:05.112Z", - "contributors": [ - "SphinxKnight", - "yuki_nichiyama" - ] - }, - "conflicting/Web/API/Crypto/getRandomValues": { - "modified": "2019-03-23T22:01:08.359Z", - "contributors": [ - "Marsf" - ] - }, "conflicting/Web/API/Document/characterSet": { "modified": "2019-03-23T23:34:04.950Z", "contributors": [ diff --git a/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html deleted file mode 100644 index 42584cb900..0000000000 --- a/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Determining the dimensions of elements -slug: conflicting/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements -tags: - - DOM -original_slug: Determining_the_dimensions_of_elements ---- -

要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。

- -

表示に使用されている領域の大きさはどのくらいか？

- -

表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、offsetWidth プロパティと offsetHeight プロパティを利用するのが良いです:

- -

Image:Dimensions-offset.png

- -

表示されているコンテンツのサイズは何か?

- -

border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 clientWidth プロパティと clientHeight プロパティを利用するのが良いです:

- -

Image:Dimensions-client.png

- -

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

- -

現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、scrollWidth プロパティと scrollHeight プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。

- -

たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。

- -

リファレンス

- -

MSDN: Measuring Element Dimension and Location

- -

{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}

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