要素のソースコードを確認する

ウェブページの構造を確認する際、ソースコードを見ることが非常に多いのです。ほとんどのブラウザは、独自のインスペクタツールを備えています。 この記事では、Chrome、Safariでソースコードを検査する方法について説明します。

検査ツールを使って、以下の画像要素のソースコードを判定してみます。

例URL

https://www.yodobashi.com/product/100000001006501446/

Chromeの場合　

（以下は公式ガイドから和訳した内容でございます）

右クリックメニューから「要素」パネルを開く

検証するには、ページ上の要素を右クリックし、「検証」を選択します。

検証ツールは、要素パネルを開き、ソースコード内の要素を選択します。

ショートカットで要素パネルを開く

このショートカットを使うと、要素パネルがインスペクタモードで表示されます。このモードでは、ページ上の要素にカーソルを合わせると、対応するコードが表示されます。

Safariの場合

MacのSafariで「開発」メニューのデベロッパツールを使用するには、メニュー表示をさせる必要があります。

検証するには、ページ上の画像要素を右クリックし、「要素の詳細を表示」を選択します。

検証ツールは、要素パネルを開き、ソースコード内の要素を選択します。

「要素選択」を使うと、要素パネルがインスペクタモードで表示されます。このモードでは、ページ上の要素にカーソルを合わせると、対応するコードが表示されます。