blob: a87afbd682c10f12cbfb876c8d5e595df7b9ce58 (
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
111
112
113
114
115
116
117
118
|
---
title: UI ツアー
slug: Tools/Page_Inspector/UI_Tour
tags:
- Guide
- Inspector
- Tools
translation_of: Tools/Page_Inspector/UI_Tour
---
<div>{{ToolsSidebar}}</div>
<p>本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。</p>
<p>ここでは、インスペクターの UI に存在する 3 つの最上位コンポーネントを扱います。</p>
<ul>
<li>[ページから要素を選択] ボタン</li>
<li>HTML ペイン</li>
<li>CSS ペイン</li>
</ul>
<p><img alt="すべてが新しくなった Firefox 57 のインスペクターパネルです。" src="pageinspector.png" style="display: block; margin-left: auto; margin-right: auto;">本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。</p>
<h2 id="Select_element_button">ページから要素を選択ボタン</h2>
<p>インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです。</p>
<p><img alt="これは Firefox 57 のインスペクターのボタンで、ウェブページの要素を選択するために使用します。" src="select_element_button.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></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">HTML ペイン</h2>
<p>インスペクターは設定に応じて、 2 または 3 枚の部分に分かれています。インスペクターを 3 ペイン表示するかどうかを切り替えることができます。次の画像は 2 ペインレイアウトを表しています。</p>
<p><img alt="Firefox 57 の HTML ペインと CSS ペインです。" src="inspector_2pane.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
<p>2 ペインモードでは、インスペクターには HTML ペインと、 6 つのツールが入る CSS ペインが入ります。</p>
<ul>
<li>ルールビュー</li>
<li>レイアウトビュー</li>
<li>計算済みビュー</li>
<li>変更点ビュー</li>
<li>互換性ビュー (Firefox Developer Edition 77 以降)</li>
<li>フォントビュー</li>
<li>アニメーションビュー</li>
</ul>
<p>以下の画像は 3 ペインモード (Firefox 62 以降で利用可能) を表しており、 CSS ルールビューがインスペクター中央の独立したペインに入ります。以下の画像は 3 ペインモードを表しています。</p>
<p><img alt="" src="inspector_tool.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
<p>ご覧の通り、 CSS ペインがインスペクターの中央に移動しました。 HTML ペインの構造について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a> のガイドを参照してください。</p>
<h2 id="Rules_view">ルールビュー</h2>
<p>ルールビューには、選択された要素に適用されているすべてのルールの一覧を、最も詳細度が高いものから最も詳細度が低いものの順で表示します。上記を見てください。</p>
<p><img alt="インスペクターのルールビュー" src="indpextor_rules.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a> をご覧ください。</p>
<h3 id="Layout_view">レイアウトビュー</h3>
<p>レイアウトビューには、そのページのボックスモデルが表示されます。ページにフレックスボックス表示モデルまたは CSS グリッドを使用している部分がある場合、このビューにはそのページで使用されているフレックスボックスまたはグリッドの設定が表示されます。</p>
<p><img alt="" src="inspector_layout.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
<p>レイアウトビューについての詳細は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a>を参照してください。なお、 Firefox 50 より前では、ボックスモデルビューは [レイアウトビュー] タブの中ではなく、独自のタブに表示されていました。</p>
<h3 id="Changes_view">変更点ビュー</h3>
<p>ルールビュー内で編集を行った場合、変更点ビューで行った変更を確認することができます。</p>
<p><img alt="変更点ビューのスクリーンショット" src="track_changes.png" style="border-style: solid; border-width: 1px;"></p>
<h3 id="Computed_view">計算済みビュー</h3>
<p>計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。</p>
<p><img alt="The Computed view within the Inspector." src="inspector_computed.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
<p>このビューに表示される CSS 宣言について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#examine_computed_css">計算済み CSS の調査</a>をご覧ください。</p>
<h3 id="Compatibility_view">互換性ビュー</h3>
<p>Firefox Developer Edition バージョン 77 より、互換性ビューには選択した要素や現在のページ全体に適用されているプロパティについて、CSS の互換性に関する問題があればそれを表示します。プロパティに対応して<em>いる</em>ブラウザーにはアイコンが表示され、実験的または非推奨のプロパティには注意を表示します。</p>
<p><img alt="互換性ビューのスクリーンショット" src="compat_view.png"></p>
<ul>
<li>プロパティの名前をクリックすると、 <em>MDN Web Docs</em> のそのプロパティのリファレンス記事が開きます。記事の「ブラウザーの互換性」の節には、そのプロパティのブラウザーの対応についての詳細が記載されています。</li>
<li><strong>すべての要素</strong>セクションでは、プロパティを使用している要素の名前をクリックすると、その要素がインスペクターで選択されます。特定のプロパティが複数の要素に適用されている場合は、三角形をクリックすると、すべての出現箇所が表示されます。</li>
<li>互換性ビューで確認するブラウザーのセットを設定するには、パネルの下部にある<strong>設定</strong>をクリックします。</li>
</ul>
<p><img alt="互換性ビューの設定のスクリーンショット" src="compat_panel_settings.png"></p>
<p>関心のないブラウザーのチェックボックスを外してください。新しいバージョンのブラウザーがリリースされると、この一覧のバージョン番号が更新されます。</p>
<h3 id="Fonts_view">フォントビュー</h3>
<p>フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。</p>
<p><img alt="Firefox 57 のすべてが新しいインスペクターパネル。" src="inspector_fonts.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
<p>詳しくは<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_fonts">フォントの編集</a>を参照してください。</p>
<h3 id="Animations_view">アニメーションビュー</h3>
<p>アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります。</p>
<p><img alt="Firefox 57 インスペクターのアニメーションペインです。" src="animation_detail.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations">アニメーションを扱う</a> をご覧ください。</p>
|
