要素のソースコードを確認する
一週間前以上前にアップデートされました

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

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

例URL

Chromeの場合

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

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

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

mceclip0.png

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

mceclip1.png

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

OS

ショートカット

Windows または Linux

Ctrl+Shift+C

Mac

Cmd+Option+C

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

Feb-07-2023_15-50-54.gif

Safariの場合

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

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

mceclip3.png

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

mceclip4.png

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

mceclip5.png
こちらの回答で解決しましたか?