要素のソースコードを確認する
フォローするウェブページの構造を確認する際、ソースコードを見ることが非常に多いのです。ほとんどのブラウザは、独自のインスペクタツールを備えています。 この記事では、Chrome、Safariでソースコードを検査する方法について説明します。
検査ツールを使って、以下の画像要素のソースコードを判定してみます。
例URL
https://www.yodobashi.com/product/100000001006501446/
Chromeの場合
(以下は公式ガイドから和訳した内容でございます)
右クリックメニューから「要素」パネルを開く
検証するには、ページ上の要素を右クリックし、「検証」を選択します。
検証ツールは、要素パネルを開き、ソースコード内の要素を選択します。
ショートカットで要素パネルを開く
OS |
ショートカット |
---|---|
Windows または Linux | Ctrl+Shift+C |
Mac | Cmd+Option+C |
このショートカットを使うと、要素パネルがインスペクタモードで表示されます。このモードでは、ページ上の要素にカーソルを合わせると、対応するコードが表示されます。
Safariの場合
MacのSafariで「開発」メニューのデベロッパツールを使用するには、メニュー表示をさせる必要があります。
検証するには、ページ上の画像要素を右クリックし、「要素の詳細を表示」を選択します。
検証ツールは、要素パネルを開き、ソースコード内の要素を選択します。
「要素選択」を使うと、要素パネルがインスペクタモードで表示されます。このモードでは、ページ上の要素にカーソルを合わせると、対応するコードが表示されます。