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 ---------------------- 1 file changed, 36 deletions(-) delete mode 100644 files/ja/conflicting/tools/page_inspector/ui_tour/index.html (limited to 'files/ja/conflicting/tools') 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"} ) }}

-- cgit v1.2.3-54-g00ecf