クロームで要素を検査する方法

このWikiHowでは、Google Chromeを使用して、任意のWebページのビジュアル要素のHTMLソースコードを検査する方法を説明します。

1

コンピュータでGoogle Chromeを開きます。Chrome アイコンは、中央に青い点があるカラー ボールのように見えます。Macの場合はアプリケーションフォルダ、Windowsの場合はスタートメニューにあります。

2

縦に3つ並んだ点のアイコンをクリックします。このボタンは、ブラウザ・ウィンドウの右上隅にあるアドレス・バーの隣にあります。ドロップダウンメニューが表示されます。

3

ドロップダウンメニューの「その他のツール」にカーソルを合わせます。サブメニューがポップアップ表示されます。

4

その他のツール]サブメニューの[開発ツール]をクリックします。ブラウザウィンドウの右側にインスペクタが表示されます。

• または、キーボードショートカットでインスペクタを開くこともできます。このショートカットは、Macでは⍢ Option+⌘ Cmd+I、WindowsではCtrl+Alt+Iです。

5

インスペクタ列の要素にマウスカーソルを合わせます。インスペクタの要素または行にマウスを移動すると、選択した要素が Web ページ上で強調表示されます。

6

任意の Web ページで検査したい要素を右クリックします。右クリックメニューがドロップダウンボックスにポップアップ表示されます。

7

ドロップダウンメニューで [検査] を選択します。 これにより、[インスペクタ] 列が選択した要素まで上下にスクロールされ、そのソースコードが強調表示されます。

• これを行うために、手動でインスペクタ列を開く必要はありません。右クリックメニューでInspectを選択すると、自動的にInspectorが開きます。

この記事は、CC BY-NC-SAで公開されている「 How to Inspect Element on Chrome 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。