From 12a79d4c4e1e2ac208355821e85e6f7b7c12a68f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 23 May 2021 01:23:01 +0900 Subject: Tools/Page_Inspector/UI_Tour を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/02/03 時点の英語版に同期 - スクリーンショットを日本語版のものに置き換え - conflictingにあるバージョンは古いので削除 --- .../tools/page_inspector/ui_tour/index.html | 36 ------- .../page_inspector/ui_tour/animation_detail.png | Bin 0 -> 8765 bytes .../ui_tour/compat_panel_settings.png | Bin 0 -> 50498 bytes .../tools/page_inspector/ui_tour/compat_view.png | Bin 0 -> 27739 bytes files/ja/tools/page_inspector/ui_tour/index.html | 114 +++++++++++---------- .../page_inspector/ui_tour/indpextor_rules.png | Bin 0 -> 19752 bytes .../page_inspector/ui_tour/inspector_2pane.png | Bin 0 -> 75382 bytes .../page_inspector/ui_tour/inspector_computed.png | Bin 0 -> 17248 bytes .../page_inspector/ui_tour/inspector_fonts.png | Bin 0 -> 18315 bytes .../page_inspector/ui_tour/inspector_layout.png | Bin 0 -> 18098 bytes .../page_inspector/ui_tour/inspector_tool.png | Bin 0 -> 81601 bytes .../tools/page_inspector/ui_tour/pageinspector.png | Bin 0 -> 145458 bytes .../ui_tour/select_element_button.png | Bin 0 -> 5693 bytes .../tools/page_inspector/ui_tour/track_changes.png | Bin 0 -> 27256 bytes 14 files changed, 61 insertions(+), 89 deletions(-) delete mode 100644 files/ja/conflicting/tools/page_inspector/ui_tour/index.html create mode 100644 files/ja/tools/page_inspector/ui_tour/animation_detail.png create mode 100644 files/ja/tools/page_inspector/ui_tour/compat_panel_settings.png create mode 100644 files/ja/tools/page_inspector/ui_tour/compat_view.png create mode 100644 files/ja/tools/page_inspector/ui_tour/indpextor_rules.png create mode 100644 files/ja/tools/page_inspector/ui_tour/inspector_2pane.png create mode 100644 files/ja/tools/page_inspector/ui_tour/inspector_computed.png create mode 100644 files/ja/tools/page_inspector/ui_tour/inspector_fonts.png create mode 100644 files/ja/tools/page_inspector/ui_tour/inspector_layout.png create mode 100644 files/ja/tools/page_inspector/ui_tour/inspector_tool.png create mode 100644 files/ja/tools/page_inspector/ui_tour/pageinspector.png create mode 100644 files/ja/tools/page_inspector/ui_tour/select_element_button.png create mode 100644 files/ja/tools/page_inspector/ui_tour/track_changes.png (limited to 'files') diff --git a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html deleted file mode 100644 index 0b7781f012..0000000000 --- a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: HTML panel -slug: conflicting/Tools/Page_Inspector/UI_Tour -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel -original_slug: Tools/Page_Inspector/HTML_panel ---- -
{{ToolsSidebar}}
- -

ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。

- -
注意: HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。
- -

HTML のナビゲートを行う

- -

HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。

- -

html-panel.png

- -

HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。

- -

属性の実験を行う

- -

ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:

- -

edit-html-attr.png

- -

参考情報

- - - -

{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}

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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/animation_detail.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/compat_panel_settings.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/compat_view.png differ 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 --- -

{{ToolsSidebar}}

+
{{ToolsSidebar}}

本記事は、インスペクターのユーザーインターフェイスの主要部を紹介するクイックツアーです。

-

ここでは、インスペクターの UI に存在する 3 つのトップレベルコンポーネントを扱います:

+

ここでは、インスペクターの UI に存在する 3 つの最上位コンポーネントを扱います。

-

The all-new Inspector panel in Firefox 57.

+

すべてが新しくなった Firefox 57 のインスペクターパネルです。本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。

-

本ガイドは、あえて可能な限り簡潔にします。そしてインスペクターの使い方を詳しく説明する、さまざまなハウツーガイドへリンクします。

+

ページから要素を選択ボタン

-

要素選択ボタン

+

インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです。

-

インスペクターは、選択中の要素に関する詳細情報を提供します。要素選択ボタンは、調査する要素を選択する手段のひとつです:

+

これは Firefox 57 のインスペクターのボタンで、ウェブページの要素を選択するために使用します。

-

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+

このボタンは、実際には ツールボックスのツールバー の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。

-

 

+

要素の選択方法については、要素の選択 のガイドをご覧ください。

-

このボタンは、実際は ツールボックスのツールバー の一部ですので、インスペクター以外のツールからでも即座にアクセスできます。

+

HTML ペイン

-

要素の選択方法については、要素を選択する のガイドをご覧ください。

+

インスペクターは設定に応じて、 2 または 3 枚の部分に分かれています。インスペクターを 3 ペイン表示するかどうかを切り替えることができます。次の画像は 2 ペインレイアウトを表しています。

-

HTML ペイン

+

Firefox 57 の HTML ペインと CSS ペインです。

-

インスペクターは 2 つのペインに分かれています。左半分は HTML ペインが占めています:

+

2 ペインモードでは、インスペクターには HTML ペインと、 6 つのツールが入る CSS ペインが入ります。

-

These are the tasty new HTML and CSS panes in Firefox 57.

+ -

 

+

以下の画像は 3 ペインモード (Firefox 62 以降で利用可能) を表しており、 CSS ルールビューがインスペクター中央の独立したペインに入ります。以下の画像は 3 ペインモードを表しています。

-

HTML ペインの構造について詳しくは、HTML の調査と編集 のガイドをご覧ください。

+

-

CSS ペイン

+

ご覧の通り、 CSS ペインがインスペクターの中央に移動しました。 HTML ペインの構造について詳しくは、HTML の調査と編集 のガイドを参照してください。

-

インスペクターの右半分は、CSS ペインが占めています:

+

ルールビュー

-

The rules view within the Inspector.

+

ルールビューには、選択された要素に適用されているすべてのルールの一覧を、最も詳細度が高いものから最も詳細度が低いものの順で表示します。上記を見てください。

-

 

+

インスペクターのルールビュー

-

CSS ペインは 5 つのビューに分かれています:

+

詳しくは CSS の調査と編集 をご覧ください。

- +

レイアウトビュー

-

ペインの上部にあるタブを使用して、別のビューに切り替えます。

+

レイアウトビューには、そのページのボックスモデルが表示されます。ページにフレックスボックス表示モデルまたは CSS グリッドを使用している部分がある場合、このビューにはそのページで使用されているフレックスボックスまたはグリッドの設定が表示されます。

-
-

メモ: Firefox 62 以降では、ルールビューを CSS ペインの他のタブとは別の独自のペインに分割することができます。これは3ペインモードと呼ばれます。

-
+

-

 

+

レイアウトビューについての詳細は、ボックスモデルの調査と編集を参照してください。なお、 Firefox 50 より前では、ボックスモデルビューは [レイアウトビュー] タブの中ではなく、独自のタブに表示されていました。

-

ルールビュー

+

変更点ビュー

-

ルールビューでは選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

+

ルールビュー内で編集を行った場合、変更点ビューで行った変更を確認することができます。

-

詳しくは CSS の調査と編集 をご覧ください。

+

変更点ビューのスクリーンショット

-

計算済みビュー

+

計算済みビュー

計算済みビューでは選択した要素について、各 CSS 属性の計算済みの値と、要素のボックスモデルを編集可能な形で視覚化したものを表示します。

-

The Computed view within the Inspector.

+

The Computed view within the Inspector.

-

 

+

このビューに表示される CSS 宣言について詳しくは、計算済み CSS の調査をご覧ください。

-

ボックスモデルビューについて詳しくは、ボックスモデルの調査と編集 をご覧ください。Firefox 50 より前のバージョンでは、ボックスモデルビューを [計算済みビュー] タブの中ではなく、個別のタブで表示していました。

+

互換性ビュー

-

このビューに表示される CSS 宣言について詳しくは、計算済み CSS の調査 をご覧ください。

+

Firefox Developer Edition バージョン 77 より、互換性ビューには選択した要素や現在のページ全体に適用されているプロパティについて、CSS の互換性に関する問題があればそれを表示します。プロパティに対応しているブラウザーにはアイコンが表示され、実験的または非推奨のプロパティには注意を表示します。

-

フォントビュー

+

互換性ビューのスクリーンショット

-

フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。

+ + +

互換性ビューの設定のスクリーンショット

-

The all-new Inspector panel in Firefox 57.

+

関心のないブラウザーのチェックボックスを外してください。新しいバージョンのブラウザーがリリースされると、この一覧のバージョン番号が更新されます。

-

 

+

フォントビュー

+ +

フォントビューでは、ページ内で使用しているすべてのフォントを、編集可能なサンプルを使用して表示します。

-

詳しくは フォントを確認する をご覧ください。

+

Firefox 57 のすべてが新しいインスペクターパネル。

-

アニメーションビュー

+

詳しくはフォントの編集を参照してください。

-

アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります:

+

アニメーションビュー

-

This is the Animations pane in the Firefox 57 Inspector.

+

アニメーションビューでは、選択した要素に適用されているアニメーションの詳細情報を表示します。また、アニメーションを一時停止する機能もあります。

-

 

+

Firefox 57 インスペクターのアニメーションペインです。

詳しくは アニメーションを扱う をご覧ください。

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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/indpextor_rules.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/inspector_2pane.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/inspector_computed.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/inspector_fonts.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/inspector_layout.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/inspector_tool.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/pageinspector.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/select_element_button.png differ 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 Binary files /dev/null and b/files/ja/tools/page_inspector/ui_tour/track_changes.png differ -- cgit v1.2.3-54-g00ecf