各WebブラウザでHTMLソースコードを表示する方法

WordPressで、ページの特定の箇所について外観を変えたいとき、該当箇所の「class」や「id」を指定して、Custom CSSを記述する場合がありますが、「class」や「id」を知るには、ページのHTMLソースコードを見るのが最も単純な方法です。

「Chrome」や「Safari」などのWebブラウザには、HTMLソースコードを表示する機能がありますので、ここでは、その方法を説明します。

Chrome ( on Windows 10 )

バージョン:80.0.3987.87

  • HTMLソースコードを表示したいページを開いた状態で、「右クリック」>「検証」をクリックします。

  • ブラウザの右半分に、HTMLソースコードが表示されます。右上の「×」をクリックすると、閉じることができます。

Safari ( on Macintosh )

バージョン:13.0.5

  • 「Safari」>「環境設定…」をクリックします。

  • 「詳細」をクリックし、最下部の「メニューバーに”開発”メニューを表示」にチェックを入れると、メニューバーに「開発」メニューが現れます。環境設定ウィンドウ左上の赤丸をクリックすると、ウィンドウを閉じることができます。

  • HTMLソースコードを表示したいページを開いた状態で、「開発」>「ページのソースを表示」をクリックします。

  • ブラウザの下半分に、HTMLソースコードが表示されます。左上の「×」をクリックすると、閉じることができます。

Edge ( on Windows 10 )

バージョン:44.18362.449.0

  • HTMLソースコードを表示したいページを開いた状態で、画面右上の「•••」>「その他のツール」>「開発者ツール」をクリックします。

  • ブラウザの右半分に、HTMLソースコードが表示されます。右上の「×」をクリックすると、閉じることができます。

Internet Explorer ( on Windows 10 )

バージョン:11.592.18362.0

  • HTMLソースコードを表示したいページを開いた状態で、「右クリック」>「ソースの表示」をクリックします。

  • ブラウザの下半分に、HTMLソースコードが表示されます。右上の「×」をクリックすると、閉じることができます。

使用したパソコンのバージョンは以下のとおりです。

  • Windows 10のバージョン:Windows 10 Pro ( 1903 )
  • Macintosh:macOS Catalina ( 10.15.3 )

なお、私がWordPressの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。


WordPressについては、Web上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。

 


このサイトで書いている、ワードプレスに関するブログ記事を、「さとやまノート」という別のブログページに、あらためて整理してまとめました。

他のワードプレス記事にも興味のある方は「さとやまノート」をご覧ください。