Chrome、Firefox、Safari、Edgeで要素を検証する方法

要素を検査するには、Chrome、Firefox、またはEdgeで要素を右クリックして「検査」を選択します。Safariでは、まずWeb開発者ツールを有効にしてから、右クリックまたはControlキーを押しながらクリックして「要素を検査」を選択します。ブラウザがツールを開き、ライブドキュメントツリーで項目を選択します。ChromeとEdgeではこのパネルを「要素」、Firefoxでは「インスペクター」、Safariでは「Webインスペクター」と呼びます。

Chromeで要素を検証する

1. Chromeでページを開き、調べたいテキスト、画像、リンク、またはコントロールを探します。
2. その項目を右クリックして「検査」を選択します。
3. 要素パネルで、DOMツリー内の選択した行を探します。スタイルパネルには、そのノードに影響を与えるCSSルールが表示されます。

または、Chrome の 3 点メニューを使用します。[その他のツール] > [開発者ツール]。ショートカットキーは、F12 キーまたはCtrl+Shift+I (Windows/Linux)、Command+Option+I (Mac) です。ページ選択モードで Elements を開くには、Ctrl+Shift+CまたはCommand+Shift+Cを押します。

Microsoft Edge で要素を検査する

1. Edgeでページを開き、該当の要素を右クリックします。
2. 「検査」を選択します。Edgeは、Elementsで対応するノードが選択された状態で開発者ツールを開きます。

または、[設定とその他] (…) > [その他のツール] > [開発者ツール]を選択します。F12キーまたはCtrl+Shift+I (Windows/Linux)、Command+Option+I (Mac) を押すと、最後に開いた開発者ツールパネルが再度開きます。カスタマイズされたショートカットは異なる場合があります。

Firefoxで要素を検証する

1. Firefoxでページを開き、検査したい項目を右クリックしてください。
2. 「検証」を選択します。Firefox は、該当する要素が選択された状態でインスペクターを開きます。
3. ツリーの矢印を展開して子要素を表示するか、別の行を選択してページの別の部分を調べます。

F12キーまたはCtrl+Shift+Iキー（Windows/Linux）、もしくはCommand+Option+Iキー（Mac）で開発者ツールを開きます。Ctrl +Shift+CキーまたはCommand+Option+Cキーでインスペクターが開きます。サイトによっては右クリックメニューが置き換えられている場合があるので、ショートカットキーまたはFirefoxのメニューを使用してください。

Safariで要素を検証する

1. MacのSafariでは、メニューバーから「Safari」＞「設定」を選択します。
2. 「詳細設定」を開き、「Web開発者向けの機能を表示」にチェックを入れます。Safari 16以前のバージョンでは、この設定は「メニューバーに開発メニューを表示」という名称になっています。
3. ページに戻り、要素を右クリックまたはControlキーを押しながらクリックして、「要素を検証」を選択します。

Webインスペクタは、クリックした要素を選択します。また、「開発」＞「Webインスペクタを表示」を選択するか、Option+Command+Iキーを押して、現在のページのWebインスペクタを開くこともできます。これらの手順は、Mac版Safariに適用されます。

パネルが開いた後に何をすべきか

一致するHTML要素を見つける

ハイライト表示されている行は、ライブDOMツリー内のノードです。矢印を展開してネストされた要素を表示するか、要素選択アイコンをクリックしてページ上にカーソルを合わせ、対象を選択してください。選択ツールは、小さい要素や重なり合った要素を選択する際に役立ちます。

CSSをレビューまたはテストする

スタイルパネル（Firefoxでは「ルール」と呼ばれます）を使用して、どのCSS宣言が適用されているか、またそれらがどこから来ているかを確認できます。宣言のチェックを外したり、値を編集したりすると、レイアウト、色、間隔、またはタイポグラフィの変更をプレビューできます。これはサイトのファイルを書き換えたり、他の訪問者の表示を変更したりすることはありません。

レスポンシブレイアウトを確認する

各ブラウザには、レスポンシブデザインまたはデバイスプレビュー機能が備わっています。ビューポートのサイズを狭く選択または入力し、同じDOMとスタイルを検証してください。これにより、ブレークポイントやレイアウトの問題が明らかになる場合がありますが、実際のデバイスでのテストに代わるものではありません。

キーボードショートカット一覧

ショートカットキーは、オペレーティングシステム、ブラウザのバージョン、またはカスタマイズ設定によって異なる場合があります。いずれかのショートカットキーが機能しない場合は、ブラウザのメニューまたはコンテキストメニューコマンドを使用してください。

要素の検証で行った変更は保存されますか？

要素、インスペクター、またはスタイルパネルでの通常の編集は、ブラウザの一時的な変更です。ページを再読み込みすると、通常はサイトから配信されたバージョンに戻ります。開発者ワークフローによっては、ローカルのオーバーライドを自分のコンピュータに保存できますが、それでも変更はWebサイトのサーバーには反映されません。DevToolsは、ページを検査およびテストするためのツールとして扱い、公開中のサイトをすべての人に公開するツールとして使用しないでください。

最新の情報については、公式のChrome DevTools ガイド、Firefox ショートカット、Apple のSafari セットアップおよび検査ガイド、Microsoft のEdge の概要を参照してください。