\ Amazonのセール、完全に理解した! /

パソコンでWebページのソースコードを表示する方法(Win・Mac)

対象OSは、Windows OS と macOS。
ブラウザは、Chrome や Edge 、 Firefox 、 Safari でWebページ(HTML)のソースコードを確認する方法をまとめてみました。

なお、スマホでソースコードを確認する場合、対象URLの先頭に「view-source:」というコマンドを追加し、
ブラウザでアクセスすると表示可能です。

下記の記事でWebツールを公開しています。

パソコンでも同じ方法で確認できますが、この記事で紹介しているマウス操作やキーボード操作で確認したほうが手っ取り早いです。

 

この記事はこんな方にオススメ!

  • パソコン ユーザーの方
    • Windows OS
    • macOS
       
  • 主要なブラウザでWebページ(HTML)のソースコードを確認する方法を知りたい方
    • Google Chrome
    • Microsoft Edge
    • Firefox
    • Safari(masOS限定)
目次

環境

しらたま

ヒント:開閉できるエリア

下記のようなエリアはクリックすると開閉可能っピ 👍

OSのバージョン

OSとは、オペレーティングシステムの略。

  • Windows OS
    ウィンドウズ オーエス。
  • macOS
    マック オーエス。
画像:macOS Monterey 12.7.3

ブラウザのバージョン

合計4つのブラウザ。

  • Google Chrome
    みんな大好き、グーグル クローム。
画像:Google Chromeのバージョン 122.0.6261.95

 

  • Microsoft Edge
    マイクロソフト エッジ。

    Chromeと同様、Chromium(クロミウム)ベースのブラウザとなる為、Google Chromeの機能とほぼ変わりません。
    Windows OS標準のブラウザということで一応、調べました。
画像:Microsoft Edgeのバージョン 122.0.2365.66

 

  • Mozilla Firefox
    非営利組織で開発しているオープンソースのブラウザ。
画像:Mozilla Firefoxのバージョン 123.0

 

  • Safari
    macOSで使用できるブラウザ。昔はWindowsでも使えた。
画像:Safariのバージョン 17.3.1

ソースコードを表示する方法

最初にマウス操作で確認する方法を記載。
その次に、なれると簡単に実行できるキーボード操作(ショートカットキー)で確認する方法を紹介します。

マウス操作

Google Chrome

STEP
確認したいWebページを表示
STEP
Webページの何も書かれていない空白欄を右クリック

右クリックで表示されるメニューは、“コンテキストメニュー”、または“ショートカットメニュー”と呼ばれています。

STEP
右クリックのメニューから「ページのソースを表示」を選択
画像:Chromeの右クリックメニュー

Microsoft Edge

Google Chromeの手順と同じです。

下記のとおり違うのは表示面だけで、右クリックメニューのラインナップが違う点と、Edgeでは、「ページのソース表示」という表記になっています。
(Chromeでは、“ページのソース表示”。)

画像:Edgeの右クリックメニュー

Mozilla Firefox

こちらも手順は、Google Chromeと同様。
右クリックのメニューもChromeと同様「ページのソース表示」となっています。

画像:Firefoxの右クリックメニュー

Safari

手順は、Google Chromeと同様。
右クリックのメニューはわかりにくいですが、「要素の詳細を表示」という表記です。

なお、この“要素の詳細を表示”を選択すると他のブラウザのようにページ全体でソースコードが表示されません。
Safariでは、Webを解析するためのツールがブラウザの下部に表示されます。
(ChromiumベースのブラウザやFirefoxでは、“開発ツール” や “開発者ツール” 、 “DevTools”などと呼ばれているツールが起動します。)

画像:Safariの右クリックメニュー
補足情報:Safariの右クリックメニューで“要素の詳細を表示”がない場合

Safariの設定を見直す必要があります。手順は下記の通り。

STEP
Safariを起動

すでに起動している場合は、Safariのウィンドウをアクティブにしてください。

STEP
画面上部にある“環境設定”を選択

Safariのウィンドウ上部ではなく、画面全体から見た最上部にあるメニューのことを指しています。

STEP
詳細タブを選択し“Web デベロッパ用の機能を表示”をチェック
STEP
再度、右クリックメニューを確認

これで“要素の詳細を表示”が表示されているはずです。
おつかれさまでした。

キーボード動作(ショートカットキー)

ショートカットキーは、なれると簡単にソースコードの表示ができるようになります。

Google Chrome + Microsoft Edge の場合

Chromiumベースのブラウザは同じショートカットだと思われます。

Google Chrome

Microsoft Edge

他のChromiumベースのブラウザ

  • Windows OS
    Ctrl + U
     
  • macOS
    ⌘ Command + ⌥ Option + U

Mozilla Firefox

  • Windows OS
    Ctrl + U
     
  • macOS
    ⌘ Command + U

Safari

  • macOS
    ⌘ Command + Option + U

まとめ

  • マウス操作 と キーボード操作(ショートカットキー)でソースコードを表示する方法をまとめた
     
  • マウスで操作する方法は、ほぼどれも一緒。
     
  • キーボード操作は、OSやブラウザにより違いがあるが、「Uキー」は共通して使用されていた。

サポート募集中

この記事はお役に立てたでしょうか。現在、サポートを募集しています。
コーヒーを一杯 ☕ ご馳走いただけないでしょうか。

この記事が気に入ったら
フォローしてね!

この記事をシェアする

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次