Chromeで要素を検証する方法

共同執筆者 wikiHow編集チーム

この記事では、パソコンを使って、Google Chromeで任意のページの視覚的要素(Element)のHTMLソースコードを検証する方法を紹介します。

ステップ

  1. 1
    パソコンでGoogle Chromeを開く Chromeのアイコンは、カラフルなボールの形をしており、真ん中に青い点が入っています。このアイコンは、Macではアプリケーションフォルダ内、Windowsではスタートメニューにあります。
  2. 2
    3つの点が縦に並ぶアイコンをクリックする このボタンはブラウザ画面右上隅、アドレスバーの隣にあります。これをクリックすると、ドロップダウンメニューが開きます。
  3. 3
    ドロップダウンメニューでその他のツールにカーソルを合わせる サブメニューがポップアップ表示されます。
  4. 4
    [その他のツール]のサブメニューでデベロッパーツールをクリックする ブラウザ画面右側に検証欄が表示が表示されます。
    • 検証欄はショートカットキーで開くこともできます。ショートカットキーは、Macでは Option+ Cmd+Iで、Windowsでは Ctrl+Alt+Iです。
  5. 5
    検証欄で要素にカーソルを合わせる 検証欄の要素または行にマウスのカーソルを合わせると、選択した要素がウェブページでハイライト表示されます。
  6. 6
    任意のウェブページで検証したい要素を右クリックする 右クリックメニューがドロップダウンボックスでポップアップ表示されます。
  7. 7
    ドロップダウンメニューで検証を選択する 検証欄が選択した要素のところまでスクロールし、その要素のソースコードがハイライト表示されます。
    • これを行うには、自分で検証欄を開く必要はありません。検証欄は、右クリックメニューで[検証]を選択すると、自動的に開きます。
    広告

このwikiHow記事について

共著:
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。
カテゴリ: インターネット
このページは 150 回アクセスされました。

この記事は役に立ちましたか?

広告