---
title: HTML panel
slug: Tools/Page_Inspector/HTML_panel
translation_of: Tools/Page_Inspector/UI_Tour
translation_of_original: Tools/Page_Inspector/HTML_panel
---
<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10.0") }}</p>

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

<div class="note"><strong>注意:</strong> HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。</div>

<h2 id="HTML_のナビゲートを行う">HTML のナビゲートを行う</h2>

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

<p><img alt="html-panel.png" class="default internal" src="/@api/deki/files/6073/=html-panel.png"></p>

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

<h2 id="属性の実験を行う">属性の実験を行う</h2>

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

<p><img alt="edit-html-attr.png" class="default internal" src="/@api/deki/files/6080/=edit-html-attr.png"></p>

<h2 id="参考情報">参考情報</h2>

<ul>
 <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
 <li><a href="/ja/Tools/Page_Inspector/Style_panel" title="ja/Tools/Page_Inspector/Style panel">Style panel</a></li>
 <li><a href="/ja/Tools" title="Tools">Tools</a></li>
</ul>

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