Tools/Page_Inspector/UI_Tour を更新

- 2021/02/03 時点の英語版に同期
- スクリーンショットを日本語版のものに置き換え
- conflictingにあるバージョンは古いので削除

13 files changed, 61 insertions, 53 deletions

diff --git a/files/ja/tools/page_inspector/ui_tour/animation_detail.png b/files/ja/tools/page_inspector/ui_tour/animation_detail.png
new file mode 100644
index 0000000000..95909753cf
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/animation_detail.png
diff --git a/files/ja/tools/page_inspector/ui_tour/compat_panel_settings.png b/files/ja/tools/page_inspector/ui_tour/compat_panel_settings.png
new file mode 100644
index 0000000000..34ddae70da
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/compat_panel_settings.png
diff --git a/files/ja/tools/page_inspector/ui_tour/compat_view.png b/files/ja/tools/page_inspector/ui_tour/compat_view.png
new file mode 100644
index 0000000000..2c380a9b78
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/compat_view.png
diff --git a/files/ja/tools/page_inspector/ui_tour/index.html b/files/ja/tools/page_inspector/ui_tour/index.html
index 627d52e4fd..a87afbd682 100644
--- a/files/ja/tools/page_inspector/ui_tour/index.html
+++ b/files/ja/tools/page_inspector/ui_tour/index.html
@@ -2,109 +2,117 @@
 title: UI ツアー
 slug: Tools/Page_Inspector/UI_Tour
 tags:
-  - インスペクタ
-  - ガイド
-  - ツール
+  - Guide
+  - Inspector
+  - Tools
 translation_of: Tools/Page_Inspector/UI_Tour
 ---
-<p>{{ToolsSidebar}}</p>
+<div>{{ToolsSidebar}}</div>
 
 <p>本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。</p>
 
-<p>ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:</p>
+<p>ここでは、インスペクターの UI に存在する 3 つの最上位コンポーネントを扱います。</p>
 
 <ul>
- <li>[ページから要素を選択します] ボタン</li>
+ <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><img alt="すべてが新しくなった Firefox 57 のインスペクターパネルです。" src="pageinspector.png" style="display: block; margin-left: auto; margin-right: auto;">本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。</p>
 
-<p>本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。</p>
+<h2 id="Select_element_button">ページから要素を選択ボタン</h2>
 
-<h2 id="Select_element_button" name="Select_element_button">要素選択ボタン</h2>
+<p>インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです。</p>
 
-<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><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>このボタンは、実際には <a href="/ja/docs/Tools/Tools_Toolbox#toolbar">ツールボックスのツールバー</a> の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。</p>
 
-<p> </p>
+<p>要素の選択方法については、<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素の選択</a> のガイドをご覧ください。</p>
 
-<p>このボタンは、実際は <a href="/ja/docs/Tools/Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。</p>
+<h2 id="HTML_pane">HTML ペイン</h2>
 
-<p>要素の選択方法については、<a href="/ja/docs/Tools/Page_Inspector/How_to/Select_an_element">要素を選択する</a> のガイドをご覧ください。</p>
+<p>インスペクターは設定に応じて、 2 または 3 枚の部分に分かれています。インスペクターを 3 ペイン表示するかどうかを切り替えることができます。次の画像は 2 ペインレイアウトを表しています。</p>
 
-<h2 id="HTML_pane" name="HTML_pane">HTML ペイン</h2>
+<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 ペインが占めています:</p>
+<p>2 ペインモードでは、インスペクターには HTML ペインと、 6 つのツールが入る CSS ペインが入ります。</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>
+<ul>
+ <li>ルールビュー</li>
+ <li>レイアウトビュー</li>
+ <li>計算済みビュー</li>
+ <li>変更点ビュー</li>
+ <li>互換性ビュー (Firefox Developer Edition 77 以降)</li>
+ <li>フォントビュー</li>
+ <li>アニメーションビュー</li>
+</ul>
 
-<p> </p>
+<p>以下の画像は 3 ペインモード (Firefox 62 以降で利用可能) を表しており、 CSS ルールビューがインスペクター中央の独立したペインに入ります。以下の画像は 3 ペインモードを表しています。</p>
 
-<p>HTML ペインの構造について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a> のガイドをご覧ください。</p>
+<p><img alt="" src="inspector_tool.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
 
-<h2 id="CSS_pane" name="CSS_pane">CSS ペイン</h2>
+<p>ご覧の通り、 CSS ペインがインスペクターの中央に移動しました。 HTML ペインの構造について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">HTML の調査と編集</a> のガイドを参照してください。</p>
 
-<p>インスペクターの右半分は、CSS ペインが占めています:</p>
+<h2 id="Rules_view">ルールビュー</h2>
 
-<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> </p>
+<p><img alt="インスペクターのルールビュー" src="indpextor_rules.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
 
-<p>CSS ペインは 5 つのビューに分かれています:</p>
+<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a> をご覧ください。</p>
 
-<ul>
- <li>ルールビュー</li>
- <li>計算済みビュー</li>
- <li>レイアウトビュー</li>
- <li>アニメーションビュー</li>
- <li>フォントビュー</li>
-</ul>
+<h3 id="Layout_view">レイアウトビュー</h3>
 
-<p>ペインの上部にあるタブを使用して、別のビューに切り替えます。</p>
+<p>レイアウトビューには、そのページのボックスモデルが表示されます。ページにフレックスボックス表示モデルまたは CSS グリッドを使用している部分がある場合、このビューにはそのページで使用されているフレックスボックスまたはグリッドの設定が表示されます。</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><img alt="" src="inspector_layout.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p>
 
-<p> </p>
+<p>レイアウトビューについての詳細は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a>を参照してください。なお、 Firefox 50 より前では、ボックスモデルビューは [レイアウトビュー] タブの中ではなく、独自のタブに表示されていました。</p>
 
-<h3 id="Rules_view" name="Rules_view">ルールビュー</h3>
+<h3 id="Changes_view">変更点ビュー</h3>
 
-<p>ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:</p>
+<p>ルールビュー内で編集を行った場合、変更点ビューで行った変更を確認することができます。</p>
 
-<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS の調査と編集</a> をご覧ください。</p>
+<p><img alt="変更点ビューのスクリーンショット" src="track_changes.png" style="border-style: solid; border-width: 1px;"></p>
 
-<h3 id="Computed_view" name="Computed_view">計算済みビュー</h3>
+<h3 id="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><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> </p>
+<p>このビューに表示される CSS 宣言について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#examine_computed_css">計算済み CSS の調査</a>をご覧ください。</p>
 
-<p>ボックスモデルビューについて詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">ボックスモデルの調査と編集</a> をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。</p>
+<h3 id="Compatibility_view">互換性ビュー</h3>
 
-<p>このビューに表示される CSS 宣言について詳しくは、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済み CSS の調査</a> をご覧ください。</p>
+<p>Firefox Developer Edition バージョン 77 より、互換性ビューには選択した要素や現在のページ全体に適用されているプロパティについて、CSS の互換性に関する問題があればそれを表示します。プロパティに対応して<em>いる</em>ブラウザーにはアイコンが表示され、実験的または非推奨のプロパティには注意を表示します。</p>
 
-<h3 id="Fonts_view" name="Fonts_view">フォントビュー</h3>
+<p><img alt="互換性ビューのスクリーンショット" src="compat_view.png"></p>
 
-<p>フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。</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><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> </p>
+<h3 id="Fonts_view">フォントビュー</h3>
+
+<p>フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。</p>
 
-<p>詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/View_fonts">フォントを確認する</a> をご覧ください。</p>
+<p><img alt="Firefox 57 のすべてが新しいインスペクターパネル。" src="inspector_fonts.png" style="border: 1px solid black; display: block; margin-left: auto; margin-right: auto;"></p>
 
-<h3 id="Animations_view" name="Animations_view">アニメーションビュー</h3>
+<p>詳しくは<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_fonts">フォントの編集</a>を参照してください。</p>
 
-<p>アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:</p>
+<h3 id="Animations_view">アニメーションビュー</h3>
 
-<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> </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>
diff --git a/files/ja/tools/page_inspector/ui_tour/indpextor_rules.png b/files/ja/tools/page_inspector/ui_tour/indpextor_rules.png
new file mode 100644
index 0000000000..44d3f023b2
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/indpextor_rules.png
diff --git a/files/ja/tools/page_inspector/ui_tour/inspector_2pane.png b/files/ja/tools/page_inspector/ui_tour/inspector_2pane.png
new file mode 100644
index 0000000000..beb5fb0e0a
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/inspector_2pane.png
diff --git a/files/ja/tools/page_inspector/ui_tour/inspector_computed.png b/files/ja/tools/page_inspector/ui_tour/inspector_computed.png
new file mode 100644
index 0000000000..d720f7ed57
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/inspector_computed.png
diff --git a/files/ja/tools/page_inspector/ui_tour/inspector_fonts.png b/files/ja/tools/page_inspector/ui_tour/inspector_fonts.png
new file mode 100644
index 0000000000..b63bd71769
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/inspector_fonts.png
diff --git a/files/ja/tools/page_inspector/ui_tour/inspector_layout.png b/files/ja/tools/page_inspector/ui_tour/inspector_layout.png
new file mode 100644
index 0000000000..437e19c216
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/inspector_layout.png
diff --git a/files/ja/tools/page_inspector/ui_tour/inspector_tool.png b/files/ja/tools/page_inspector/ui_tour/inspector_tool.png
new file mode 100644
index 0000000000..5829bfb643
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/inspector_tool.png
diff --git a/files/ja/tools/page_inspector/ui_tour/pageinspector.png b/files/ja/tools/page_inspector/ui_tour/pageinspector.png
new file mode 100644
index 0000000000..cb12dde966
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/pageinspector.png
diff --git a/files/ja/tools/page_inspector/ui_tour/select_element_button.png b/files/ja/tools/page_inspector/ui_tour/select_element_button.png
new file mode 100644
index 0000000000..fe64bc9a82
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/select_element_button.png
diff --git a/files/ja/tools/page_inspector/ui_tour/track_changes.png b/files/ja/tools/page_inspector/ui_tour/track_changes.png
new file mode 100644
index 0000000000..ae30784d30
--- /dev/null
+++ b/files/ja/tools/page_inspector/ui_tour/track_changes.png