blob: 627d52e4fd3dfd746cef5d9b440f68a19712715d (
plain)
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
---
title: UI ツアー
slug: Tools/Page_Inspector/UI_Tour
tags:
- インスペクタ
- ガイド
- ツール
translation_of: Tools/Page_Inspector/UI_Tour
---
<p>{{ToolsSidebar}}</p>
<p>本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。</p>
<p>ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:</p>
<ul>
<li>[ページから要素を選択します] ボタン</li>
<li>HTML ペイン</li>
<li>CSS ペイン</li>
</ul>
<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。</p>
<h2 id="Select_element_button" name="Select_element_button">要素選択ボタン</h2>
<p>インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:</p>
<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p> </p>
<p>このボタンは、実際は <a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。</p>
<p>要素の選択方法については、<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素を選択する</a> のガイドをご覧ください。</p>
<h2 id="HTML_pane" name="HTML_pane">HTML ペイン</h2>
<p>インスペクターは 2 つのペインに分かれています。左半分は HTML ペインが占めています:</p>
<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>
<p> </p>
<p>HTML ペインの構造について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a> のガイドをご覧ください。</p>
<h2 id="CSS_pane" name="CSS_pane">CSS ペイン</h2>
<p>インスペクターの右半分は、CSS ペインが占めています:</p>
<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;"></p>
<p> </p>
<p>CSS ペインは 5 つのビューに分かれています:</p>
<ul>
<li>ルールビュー</li>
<li>計算済みビュー</li>
<li>レイアウトビュー</li>
<li>アニメーションビュー</li>
<li>フォントビュー</li>
</ul>
<p>ペインの上部にあるタブを使用して、別のビューに切り替えます。</p>
<div class="note">
<p><strong>メモ</strong>: Firefox 62 以降では、ルールビューを CSS ペインの他のタブとは別の独自のペインに分割することができます。これは<a href="/ja/docs/ja/docs/Tools/Page_Inspector/3-pane_mode">3ペインモード</a>と呼ばれます。</p>
</div>
<p> </p>
<h3 id="Rules_view" name="Rules_view">ルールビュー</h3>
<p>ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:</p>
<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a> をご覧ください。</p>
<h3 id="Computed_view" name="Computed_view">計算済みビュー</h3>
<p>計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。</p>
<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p> </p>
<p>ボックスモデルビューについて詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a> をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。</p>
<p>このビューに表示される CSS 宣言について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済み CSS の調査</a> をご覧ください。</p>
<h3 id="Fonts_view" name="Fonts_view">フォントビュー</h3>
<p>フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。</p>
<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p> </p>
<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/View_fonts">フォントを確認する</a> をご覧ください。</p>
<h3 id="Animations_view" name="Animations_view">アニメーションビュー</h3>
<p>アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:</p>
<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p> </p>
<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションを扱う</a> をご覧ください。</p>
|
