diff options
-rw-r--r-- | files/ja/_redirects.txt | 2 | ||||
-rw-r--r-- | files/ja/_wikihistory.json | 17 | ||||
-rw-r--r-- | files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html | 32 | ||||
-rw-r--r-- | files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png | bin | 0 -> 10230 bytes | |||
-rw-r--r-- | files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png | bin | 0 -> 10553 bytes | |||
-rw-r--r-- | files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/index.html | 24 |
6 files changed, 16 insertions, 59 deletions
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 ---- -<p><span class="CRHTML_TXN"><span id="eq00000g00003">要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。</span></span></p> - -<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">表示に使用されている領域の大きさはどのくらいか?</h3> - -<p>表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、<code><a href="/ja/DOM/element.offsetWidth" title="ja/DOM/element.offsetWidth">offsetWidth</a></code> プロパティと <code><a href="/ja/DOM/element.offsetHeight" title="ja/DOM/element.offsetHeight">offsetHeight</a></code> プロパティを利用するのが良いです:</p> - -<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> - -<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されているコンテンツのサイズは何か?</h3> - -<p>border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 <code><a href="/ja/DOM/element.clientWidth" title="ja/DOM/element.clientWidth">clientWidth</a></code> プロパティと <code><a href="/ja/DOM/element.clientHeight" title="ja/DOM/element.clientHeight">clientHeight</a></code> プロパティを利用するのが良いです:</p> - -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> - -<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどのくらいか?</h3> - -<p>現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、<code><a href="/ja/DOM/element.scrollWidth" title="ja/DOM/element.scrollWidth">scrollWidth</a></code> プロパティと <code><a href="/ja/DOM/element.scrollHeight" title="ja/DOM/element.scrollHeight">scrollHeight</a></code> プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。</p> - -<p>たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。</p> - -<h3 id="References" name="References">リファレンス</h3> - -<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p> - -<p>{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}</p> 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 Binary files differnew file mode 100644 index 0000000000..41fc540f11 --- /dev/null +++ b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-client.png 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 Binary files differnew file mode 100644 index 0000000000..aeaa276349 --- /dev/null +++ b/files/ja/web/api/css_object_model/determining_the_dimensions_of_elements/dimensions-offset.png 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 --- <div>{{DefaultAPISidebar("CSSOM View")}}</div> -<p>要素の幅と高さを決定するために調べることができるいくつかのプロパティがあり、どちらがニーズに適しているかを決定するのは難しい場合があります。 この記事は、あなたがその決定をするのを助けるように作られています。 これらのプロパティはすべて読み取り専用であることに注意してください。 要素の幅と高さを設定する場合は、{{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用します。</p> +<p>要素の幅と高さを決定するために見ることがあるプロパティはいくつかあり、どれがニーズに適しているかを特定するのが難しい場合があります。この記事は、その決定に役立つように作られています。これらのプロパティはすべて読み取り専用であることに注意してください。要素の幅と高さを設定する場合は、 {{CSSxRef("width")}} と {{CSSxRef("height")}}、またはそれをオーバーライドする {{CSSxRef("min-width")}} と {{CSSxRef("max-width")}}、および {{CSSxRef("min-height")}} と {{CSSxRef("max-height")}} プロパティを使用してください。</p> -<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">それはどのくらいのスペースを使いますか?</h2> +<h2 id="How_much_room_does_it_use_up.3F">どれくらいの空間を占めるのか</h2> -<p>表示されているコンテンツの幅、スクロールバー(存在する場合)、パディング、ボーダーを含んだ、要素が占めるスペースの合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がない場合、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。 変換の場合、<code>offsetWidth</code> および <code>offsetHeight</code> は要素のレイアウトの幅と高さを返し、<code>getBoundingClientRect()</code> はレンダリングの幅と高さを返します。 例として、要素に <code>width: 100px;</code> と <code>transform: scale(0.5);</code> がある場合 <code>getBoundingClientRect()</code> は幅として 50 を返し、<code>offsetWidth</code> は 100 を返します。</p> +<p>表示されているコンテンツの幅、スクロールバー (存在する場合)、パディング、境界を含んだ、要素が占める空間の合計量を知る必要がある場合は、{{DOMxRef("HTMLElement.offsetWidth")}} プロパティと {{DOMxRef("HTMLElement.offsetHeight")}} プロパティを使用します。 ほとんどの場合、要素に適用される変換がなければ、これらは {{DOMxRef("Element.getBoundingClientRect()")}} の幅と高さと同じです。変換がある場合、<code>offsetWidth</code> および <code>offsetHeight</code> は要素のレイアウトの幅と高さを返し、<code>getBoundingClientRect()</code> はレンダリングの幅と高さを返します。例として、要素に <code>width: 100px;</code> と <code>transform: scale(0.5);</code> がある場合 <code>getBoundingClientRect()</code> は幅として 50 を返し、<code>offsetWidth</code> は 100 を返します。</p> -<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> +<p><img src="dimensions-offset.png"></p> -<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">表示されるコンテンツのサイズは?</h2> +<h2 id="What.27s_the_size_of_the_displayed_content.3F">表示されるコンテンツの大きさ</h2> -<p>パディングを含み、ボーダー、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占めるスペースを知る必要がある場合は、{{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。</p> +<p>パディングを含み、境界、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占める空間を知る必要がある場合は、 {{DOMxRef("Element.clientWidth")}} プロパティと {{DOMxRef("Element.clientHeight")}} プロパティを使用します。</p> -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> +<p><img src="dimensions-client.png"></p> -<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">コンテンツの大きさはどれくらいですか?</h2> +<h2 id="How_big_is_the_content.3F">コンテンツの大きさはどれくらいか</h2> <p>コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、{{DOMxRef("Element.scrollWidth")}} プロパティと {{DOMxRef("Element.scrollHeight")}} プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。</p> -<p>例えば、600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、<code>scrollWidth</code> は 600 を返し、<code>scrollHeight</code> は 400 を返します。</p> +<p>例えば、 600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、<code>scrollWidth</code> は 600 を返し、<code>scrollHeight</code> は 400 を返します。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a class="external" href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a></li> - <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: 要素の寸法と位置の測定</a>(英語)</li> + <li><a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: 要素の寸法と位置の測定</a> (英語)</li> </ul> |