対象OSは、Windows OS と macOS。
ブラウザは、Chrome や Edge 、 Firefox 、 Safari でWebページ(HTML)のソースコードを確認する方法をまとめてみました。
なお、スマホでソースコードを確認する場合、対象URLの先頭に「view-source:
」というコマンドを追加し、
ブラウザでアクセスすると表示可能です。
下記の記事でWebツールを公開しています。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/02/9273308bcc7fe059d52888382477da92-300x158.webp)
パソコンでも同じ方法で確認できますが、本記事で紹介しているマウス操作やキーボード操作で確認したほうが手っ取り早いです。
- パソコン ユーザーの方
- Windows OS
- macOS
- 主要なブラウザでWebページ(HTML)のソースコードを確認する方法を知りたい方
- Google Chrome
- Microsoft Edge
- Firefox
- Safari(masOS限定)
環境
![](https://haretokidoki-blog.com/wp-content/uploads/2022/06/e2638de4d1d614410d89bd57dadd7a65-150x150.webp)
ヒント:開閉できるエリア
下記のようなエリアはクリックすると開閉可能っピ 👍
OSのバージョン
ブラウザのバージョン
合計4つのブラウザ。
- Google Chrome
みんな大好き、グーグル クローム。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Chrome_Version.webp)
- Microsoft Edge
マイクロソフト エッジ。
Chromeと同様、Chromium(クロミウム)ベースのブラウザとなる為、Google Chromeの機能とほぼ変わりません。
Windows OS標準のブラウザということで一応、調べました。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Edge_Version.webp)
- Mozilla Firefox
非営利組織で開発しているオープンソースのブラウザ。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Firefox_Version.webp)
- Safari
macOSで使用できるブラウザ。昔はWindowsでも使えた。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Safari_Version.webp)
ソースコードを表示する方法
最初にマウス操作で確認する方法を記載。
その次に、なれると簡単に実行できるキーボード操作(ショートカットキー)で確認する方法を紹介します。
マウス操作
Google Chrome
右クリックで表示されるメニューは、“コンテキストメニュー”、または“ショートカットメニュー”と呼ばれています。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Chrome_contextmenu-1.webp)
Microsoft Edge
Google Chromeの手順と同じです。
下記のとおり違うのは表示面だけで、右クリックメニューのラインナップが違う点と、Edgeでは、「ページのソース表示」という表記になっています。
(Chromeでは、“ページのソースを表示”。)
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Edge_contextmenu.webp)
Mozilla Firefox
こちらも手順は、Google Chromeと同様。
右クリックのメニューもChromeと同様「ページのソースを表示」となっています。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Firefox_contextmenu.webp)
Safari
手順は、Google Chromeと同様。
右クリックのメニューはわかりにくいですが、「要素の詳細を表示」という表記です。
なお、この“要素の詳細を表示”を選択すると他のブラウザのようにページ全体でソースコードが表示されません。
Safariでは、Webを解析するためのツールがブラウザの下部に表示されます。
(ChromiumベースのブラウザやFirefoxでは、“開発ツール” や “開発者ツール” 、 “DevTools”などと呼ばれているツールが起動します。)
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Safari_contextmenu.webp)
補足情報:Safariの右クリックメニューで“要素の詳細を表示”がない場合
Safariの設定を見直す必要があります。手順は下記の通り。
すでに起動している場合は、Safariのウィンドウをアクティブにしてください。
Safariのウィンドウ上部ではなく、画面全体から見た最上部にあるメニューのことを指しています。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/03/Safari_settings.webp)
これで“要素の詳細を表示”が表示されているはずです。
おつかれさまでした。
キーボード動作(ショートカットキー)
ショートカットキーは、なれると簡単にソースコードの表示ができるようになります。
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キー」は共通して使用されていた。
![](https://haretokidoki-blog.com/wp-content/uploads/2024/02/9273308bcc7fe059d52888382477da92-300x158.webp)
コメント