files/ja/tools/measure_a_portion_of_the_page/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

---
title: ページの一部を測定する
slug: Tools/Measure_a_portion_of_the_page
tags:
  - DevTools
  - Firefox
  - ツール
  - 測定
translation_of: Tools/Measure_a_portion_of_the_page
---
<div>{{ToolsSidebar}}</div>

<p class="geckoVersionNote">Firefox 59の新機能</p>

<p>Firefox 59以降、<em>ページの一部を測定</em> ツールを使用してWebページの特定の領域を測定することができます。</p>

<p>このツールはデフォルトでは表示されません。ボタンを有効にするには：</p>

<ul>
 <li>DevTools の<a href="/ja/docs/Tools/Tools_Toolbox#Settings">設定</a>に進みます</li>
 <li>使用可能なツールボックスボタンから、ページの一部の測定チェックボックスをオンにします</li>
</ul>

<p>[設定/オプション]ボタンと同じ場所に、ツールボックスの右上にある[ページの一部を測定]ボタンが表示されます。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15787/measure-button.png" style="display: block; height: 190px; margin: 0px auto; width: 324px;"></p>

<p>ツールを使用する場合はこのボタンをクリックします。これで、ビューポート上にマウスを置くと、そのマウスの横に現在の座標が表示された十字カーソルが表示されます。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15786/cursor-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 277px; margin: 0px auto; width: 447px;"></p>

<p>マウスボタンを押したままドラッグすると、x、y、および対角線の寸法が表示された長方形が描画されます。単位はピクセルです。</p>

<p>マウスを押し下げるのを止めると、ボタンを放したとき画面上に表示されていた長方形は、再びクリックするまでそこにとどまり、スクリーンショットを撮ることや、情報を書き留めることなどができるようになります。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15785/box-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 303px; margin: 0px auto; width: 438px;"></p>