mozilla

リビジョンの比較

インスペクタ

Change Revisions

リビジョン 311079:

リビジョン 311079 (編集者: yyss / 編集日時: )

リビジョン 437549:

リビジョン 437549 (編集者: yyss / 編集日時: )

タイトル:
ページ調査ツール
ページ調査ツール
URL スラグ:
Tools/Page_Inspector
Tools/Page_Inspector
タグ:
"Tools", "Web Development:Tools", "css", "HTML", "DOM", "Web Development", "Stylesheets"
"Tools", "Web Development:Tools", "css", "HTML", "DOM", "Web Development", "Stylesheets", "Tools", "Web Development:Tools", "css", "HTML", "DOM", "Web Development", "Stylesheets"
内容:

リビジョン 311079
リビジョン 437549
n8      {{ fx_minversion_header("10") }}n8      ページの構造やレイアウトの調査や変更を行うために、調査ツールを使用しましょう。
9    </p>
10    <p>9    </p>
11      ページ調査ツールは、ページの構造やレイアウトの検証に役立つツールです。"Web 開発" メニュー (Mac では "ツ10    <h2 id="Opening_the_Inspector" name="Opening_the_Inspector">
>ール" メニューのサブメニューとして存在します) で "調査" を選択するか、Ctrl-Shift-I (MacOS X および  
>Linux では Cmd-Option-I) キーを押してください。ページ調査ツールが有効になったら、検証したい要素をクリックする 
>ことができます。あるいは、検証したい要素上で右クリックしてコンテキストメニューの "要素を調査" をクリックすることで、始めにペー 
>ジ調査ツールを起動することなく直接要素を選択することもできます。 
11      調査ツールを開く
12    </h2>
12    </p>13    <p>
14      調査ツールを開く方法がいくつかあります:
13    <p>15    </p>
14      ページ上でマウスポインタを動かしていると、調査ツールは現在指し示している要素に関する情報を表示します。その外見は以下の16    <ul>
>ようなものです: 
17      <li>"Web 開発" メニュー (Mac では、"ツール" メニューのサブメニューです) で、"調査" を選択しま
 >す。
18      </li>
19      <li>Ctrl-Shift-I (Mac OS X や Linux では Cmd-Option-I) を押下します。
20      </li>
21      <li>Web ページ上の要素を右クリックして、"要素を調査" を選択します。
22      </li>
23    </ul>
15    </p>24    <p>
25      調査ツールがアクティブになっている<a href="/ja/docs/Tools/DevTools_Window" t
 >itle="Tools/DevTools_Window">開発ツールウィンドウ</a>が、ブラウザウィンドウの下部に現れます。
16    <p>26    </p>
17      <img alt="inspect-select.png" class="internal default" src=
>"/@api/deki/files/6070/=inspect-select.png" style=""> 
18    </p>27    <p>
28      "要素を調査" をクリックして調査ツールを起動するとその要素は選択済みの状態であり、また調査ツールは後述する <a h
 >ref="#Selecting-Elements" title="#Selecting-Elements">"要素の選択"</a>
 > のような表示および動作になります。
19    <p>29    </p>
20      この画像で、ユーザはページ上部にある BrowserID の "Sign in" ボタンをポイントしていることがわかり
>ます。なおページの他の部分は暗く表示されます。ポップアップボックスでは、その要素が HTML の {{HTMLElement("a 
>")}} (アンカー) 要素で、クラスが "browserid-signin" であることを示しています。ページ下部にあるのはペー 
>ジ調査ツールのツールバーです。詳しくは次の章で説明します。 
21    </p>30    <p>
31      他の方法で起動した場合は、ページ上でマウスを動かすのに応じてマウスポインタの下にある要素を点線の枠で強調するとともに、
 >要素の HTML タグを吹き出しの注釈で表示します。また同時に文脈中の HTML 定義箇所を、調査ツールの左側ペインで表示します。
22    <p>32    </p>
23      要素をクリックするまでの間 (要素を右クリックして "要素を調査" を選択した場合を除く)、ツールの表示内容はマウスポ
>インタの移動に合わせて、ポインタの下にある要素に関する情報を表示するよう自動的に更新されます。要素をクリックすると、表示内容が固定 
>されて情報を詳しく見ることができるようになります。 
24    </p>33    <p>
25    <h2 id="The_Page_Inspector_toolbar" name="The_Page_Inspector_34      <img alt="" src="https://mdn.mozillademos.org/files/5323/in
>toolbar">>spector-no-element-selected.png" style="width: 915px; height: 958
 >px; display: block; margin-left: auto; margin-right: auto;">
26      ページ調査ツールのツールバー
27    </h2>
28    <p>35    </p>
29      ページ調査ツールがブラウザウィンドウの下部に置くツールバーは、以下のようなものです:36    <h2 id="Selecting_Elements" name="Selecting_Elements">
37      <a name="Selecting-Elements" id="Selecting-Elements">要素の選択<
 >/a>
38    </h2>
30    </p>39    <p>
40      要素上でクリックすることで、その要素を選択します。要素を選択すると調査ツールはその要素で表示をロックしますので、調査ツ
 >ールが別の要素に切り替えてしまうことなくマウスを移動できます。
31    <p>41    </p>
32      <img alt="page-inspector-toolbar-diagram.png" class="intern
>al default" src="/@api/deki/files/6072/=page-inspector-toolbar-di 
>agram.png" style=""> 
33    </p>42    <p>
43      要素の注釈を表示する吹き出しは、左右にボタンが表示されます。左側のボタンは要素の選択を解除、右側のボタンは対象要素向け
 >のポップアップメニューを表示します。
34    <p>44    </p>
35      ツールバーには 5 つの操作エリアがあります:
36    </p>45    <p>
46      <img alt="" src="https://mdn.mozillademos.org/files/5457/in
 >spector-element-selected-annotated.png" style="width: 933px; heig
 >ht: 1106px; display: block; margin-left: auto; margin-right: auto
 >;">また要素を選択すると、要素のスタイルに関する情報が調査ツールの右側ペインに表示されます。
47    </p>
48    <p>
49      <img alt="" src="https://mdn.mozillademos.org/files/5451/in
 >spector-element-selected-context-menu-cropped.png" style="width: 
 >449px; height: 324px; float: right;">
50    </p>
51    <p>
52      吹き出しの右側にあるボタンをクリックすると<a name="element-popup" id="element-po
 >pup">ポップアップメニュー</a>が表示され、ここには以下の項目があります:
53    </p>
37    <dl>54    <ul>
38      <dt>55      <li>要素の innerHTML または outerHTML をコピーする
39        閉じるボタン
40      </dt>56      </li>
41      <dd>57      <li>要素を一意に選択する CSS セレクタをコピーする
42        ツールバーの左端にある "X" 印のアイコンが閉じるボタンです。ボタンをクリックするとページ調査ツールが閉じます。
>ドキュメントにフォーカスがある状態で Esc キーを押しても閉じることができます。 
43      </dd>58      </li>
44      <dt>59      <li>要素を削除する
45        調査 (Ctrl-I)
46      </dt>60      </li>
47      <dd>61      <li>
48        <p>62        <a href="/ja/docs/Web/CSS/:hover" title="Web/CSS/:hover">
 >:hover</a>、<a href="/ja/docs/Web/CSS/:focus" title="Web/CSS/:focu
 >s">:focus</a>、または <a href="/ja/docs/Web/CSS/:active" title="Web/C
 >SS/:active">:active</a> CSS 疑似クラスを設定する
49          調査ボタンは、ハイライト表示されている要素を反映するツールバーの固定/固定解除を行います。特定の要素で固定して
>いるときにこのボタンをクリックすると要素の選択が解除されて、ブラウザのウィンドウ内でマウスポインタを動かすことで新たな要素を選択す 
>ることができます。要素が選択されていないときにこのボタンをクリックすると、そのときにマウスでポイントしている要素が選択されます。 
50        </p>
51      </dd>63      </li>
52    </dl>64    </ul>
65    <p>
66      調査ツールのメインウィンドウは 2 つに分けられています: 左半分はページの HTML に関する情報を表示、右半分はペ
 >ージの CSS に関する情報を表示します。
67    </p>
68    <h2 id="HTML_pane" name="HTML_pane">
69      HTML ペイン
70    </h2>
71    <p>
72      <img alt="" src="https://mdn.mozillademos.org/files/5459/in
 >spector-html-toolbar-annotated.png" style="width: 938px; height: 
 >443px; float: right;">HTML ペインはページの HTML をツリー上に表示しており、そのノードは折りたたむ
 >ことができます。選択した要素の開始タグと終了タグは、灰色の背景色で強調されます。
73    </p>
74    <p>
75      このペインで HTML (タグ、属性、内容物) を直接編集できます: 編集したい要素をクリックして、変更して、Ente
 >r キーを押下すると、変更点は直ちに反映されます。
76    </p>
77    <p>
78      要素のコンテキストメニューを表示させると、<a href="#element-popup" title="#eleme
 >nt-popup">要素の吹き出しで表示できるものと同じ</a>ポップアップメニューが表示されます。
79    </p>
80    <p>
81      ペインの上部には、3 つのセクションに分けられた専用ツールバーがあります:
82    </p>
53    <dl>83    <ul>
54      <dt>84      <li>
55        パンくずリスト: 要素の階層構造 (矢印キー)85        <em>要素の選択</em>: このボタンをクリックすると、ブラウザウィンドウ内でマウスを動かすことによって別の要
 >素を選択できます。
56      </dt>86      </li>
57      <dd>87      <li>
58        ツールバーの大部分は、パンくずリストで占められています。これは入れ子になっている要素の階層を、親要素を左・子要素を88        <em>HTML パンくずリスト</em>: 選択した要素を包含する枝に向かう、ドキュメント内の階層全体を表示しま
>右に置く形で示します。また、各要素の要素名、CSS スタイル、クラスが表示されます。情報が途中までしか表示されない場合は、その要素>す。リスト上のいずれかの要素をクリックアンドホールドすると、隣接する要素のいずれかを選択できるポップアップメニューが表示されます。
>の項目にマウスポインタを載せるとツールチップで完全な情報が表示されます。リスト上のいずれかの要素をクリックしてホールドすると、隣接>リストが表示領域より長くなっているときは、リストの左端と右端にある小さな矢印アイコンをクリックしてスクロールできます。
>する要素のいずれかを選択できるポップアップメニューが表示されます。リストが表示領域より長くなっているときは、リストの左端と右端にあ 
>る小さな矢印アイコンをクリックすることでスクロールします。また、キーボードの矢印キーを用いて要素の階層リストを操作することもできま 
>す。 
59      </dd>89      </li>
60      <dt>90      <li>
61        3D ビューボタン (Ctrl-W) {{fx_minversion_inline("11.0")}}91        <em>タグの検索</em>: 入力したタグをページ内で検索します。"Enter" を押下すると次の項目を検索しま
 >す。
62      </dt>92      </li>
63      <dd>
64        <a href="/ja/docs/Tools/Page_Inspector/3D_view" title="ja
>/docs/Tools/Page_Inspector/3D_view">3D ビュー</a> の有効/無効を切り替えます。このボタ 
>ンは、システムで WebGL をサポートしている場合にのみ利用可能です。利用可能な場合はボタンをクリックすることで、ページの DO 
>M 階層構造を 3D 描写で見ることができます。3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する 
>必要があるかもしれません。詳細情報は、<a class="link-https" href="https://wiki.mozil 
>la.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki 
>.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">ブラックリストに登録された 
>ドライバのページ</a>をご覧ください。 
65      </dd>
66      <dt>
67        HTML ボタン (Ctrl-H)
68      </dt>
69      <dd>
70        HTML ボタンは、選択された要素を作成した HTML を表示する <a href="/ja/docs/Tools
>/Page_Inspector/HTML_panel" title="ja/docs/Tools/Page_Inspector/H 
>TML panel">HTML パネル</a> の表示/非表示を切り替えます。 
71      </dd>
72      <dt>
73        スタイルボタン (Ctrl-S)
74      </dt>
75      <dd>
76        スタイルボタンは、 選択された要素にスタイルを与えている CSS を表示する <a href="/ja/docs/
>Tools/Page_Inspector/Style_panel" title="ja/docs/Tools/Page_Inspe 
>ctor/Style panel">スタイルパネル</a> の表示/非表示を切り替えます。 
77      </dd>
78    </dl>93    </ul>
79    <h2 id="Keyboard_shortcuts" name="Keyboard_shortcuts">94    <h3 id="Keyboard_shortcuts" name="Keyboard_shortcuts">
n81    </h2>n96    </h3>
n83      ページの調査を行う際に使用できる便利なキーボードショートカットがあります。n98      ページの調査を行う際に使用できる便利なキーボードショートカットがあります。
n129            ESCn144            Tab
130          </td>
131          <td>145          </td>
132            ページ調査ツールを閉じます。146          <td>
147            カーソルを次のタグまたは属性に移動します。
n140            現在ハイライト表示されている要素を、調査のために選択した要素として固定または固定解除します。n155            カレントのタグまたは属性にテキスト編集カーソルを置くことで、編集が可能になります。
nn160    <h2 id="CSS_pane" name="CSS_pane">
161      CSS ペイン
162    </h2>
163    <p>
164      CSS ペインでは、現在選択している要素に適用されているスタイルに関する情報を表示します。このペインは 4 つのビュー
 >に分けられています: "ルール"、"計算済み"、"フォント"、"ボックスモデル" です。ペイン上部のツールバーでこれらのビューを切
 >り替えることができます:
165    </p>
166    <p>
167      <img alt="" src="https://mdn.mozillademos.org/files/5463/in
 >spector-css-toolbar-annotated.png" style="width: 902px; height: 4
 >36px; display: block; margin-left: auto; margin-right: auto;">
168    </p>
169    <h3 id="Rules_view" name="Rules_view">
170      ルールビュー
171    </h3>
172    <p>
173      このビューでは選択した要素に適用しているすべてのルールを、もっとも具体的なものからあいまいなものの順に並べています。規
 >則の上にマウスポインタをのせると、隣にチェックボックスが表示されます: このチェックボックスで規則の有効・無効を切り替えできます:
174    </p>
175    <p>
176      <img alt="" src="https://mdn.mozillademos.org/files/5467/in
 >spector-css-rules.png" style="width: 864px; height: 385px; displa
 >y: block; margin-left: auto; margin-right: auto;">規則をクリックすると編集が可能
 >になり、また直ちに結果を見ることができます。ブロックの終端をクリックすると、セレクタに適用する新たな規則を追加できます。
177    </p>
178    <h3 id="Computed_view" name="Computed_view">
179      計算済みビュー
180    </h3>
181    <p>
182      このビューでは選択した要素について、各 CSS 属性の計算済みの値を表示します。
183    </p>
184    <p>
185      <img alt="" src="https://mdn.mozillademos.org/files/5473/in
 >spector-css-computed.png" style="width: 867px; height: 385px; dis
 >play: block; margin-left: auto; margin-right: auto;">
186    </p>
187    <p>
188      デフォルトでは、ページによって明示的に設定された値のみ表示します: すべての値を参照するには、"ブラウザ CSS" チ
 >ェックボックスをクリックします。
189    </p>
190    <h3 id="Fonts_view" name="Fonts_view">
191      フォントビュー
192    </h3>
193    <p>
194      このビューでは、選択した要素で使用しているすべてのフォントを表示します:
195    </p>
196    <p>
197      <img alt="" src="https://mdn.mozillademos.org/files/5469/in
 >spector-css-fonts.png" style="width: 867px; height: 384px; displa
 >y: block; margin-left: auto; margin-right: auto;">
198    </p>
199    <h3 id="Box_model_view" name="Box_model_view">
200      ボックスモデルビュー
201    </h3>
202    <p>
203      このビューでは、要素に適用されているものと同じ<a href="/ja/docs/Web/CSS/box_model"
 > title="Web/CSS/box_model">ボックスモデル</a>をグラフィカルに表現します。
204    </p>
205    <p>
206      <img alt="" src="https://mdn.mozillademos.org/files/5471/in
 >spector-css-box-model.png" style="width: 867px; height: 384px; di
 >splay: block; margin-left: auto; margin-right: auto;">
207    </p>
n149      Web コンソールとページ調査ツールは同時に使用することができます。また実は、さらなる追加機能があります。ページ調査ツn212      Web コンソールとページ調査ツールは同時に使用することができます。また実は、さらなる追加機能があります。ページ調査ツ
>ールで選択されている要素があるときに、Web コンソールで変数 <code>$0</code> を用 JavaScript >ールで選択されている要素は Web コンソール内の JavaScript 変数 <code>$0</code> を使て参照
>でその要素を参照することができます。>できます。
150    </p>
151    <p>213    </p>
152      <img alt="web-console.png" class="internal default" src="/@214    <p>
>api/deki/files/6078/=web-console.png"> 
215      <img alt="" src="https://mdn.mozillademos.org/files/5461/in
 >spector-console.png" style="width: 867px; height: 253px; display:
 > block; margin-left: auto; margin-right: auto;">
n155      参考情報n218      関連情報
t157    <ul>t
158      <li>220    <ul>
159        <a href="/ja/docs/Tools" title="Tools">Tools</a>
160      </li>221      <li>
222        <a href="/ja/docs/Tools" title="Tools">開発ツール</a>
161      <li>223      </li>
162        <a href="/ja/docs/Tools/Web_Console" title="Using the Web
> Console">Using the Web Console</a> 
163      </li>224      <li>
225        <a href="/ja/docs/Tools/Web_Console" title="Using the Web
 > Console">Web コンソール</a>
164      <li>226      </li>
227      <li>
165        <a href="/ja/docs/Tools/Scratchpad" title="Scratchpad">Sc228        <a href="/ja/docs/Tools/Scratchpad" title="Scratchpad">スク
>ratchpad</a>>ラッチパッド</a>

前に戻る