Webページの裏側を覗いてみたいと思ったことはありませんか？
「このサイト、どんな風に作られているんだろう」「HTMLやCSSのコードを確認したい」そんな時に役立つのが、ブラウザのソース表示機能です。
この記事では、Microsoft Edgeでページのソースコードを簡単に表示する方法を、画像なしでも分かるように丁寧に解説していきます。
ソース表示とは？まずは基本を理解しよう
ソース表示（ページソース表示）とは、Webページを構成しているHTML、CSS、JavaScriptなどのコードを確認できる機能のことです。
私たちが普段見ている綺麗なWebページは、実は裏側で大量のコードによって動いています。ソース表示を使えば、そのコードを直接見ることができるんです。
ソース表示が役立つ場面
- Webデザインの参考にしたい時
- 使われている色やフォントを調べたい時
- プログラミング学習で実際のコードを確認したい時
- SEO対策でメタタグを確認したい時
- 不具合の原因を調査したい時
【方法1】右クリックメニューから表示する
最も簡単で直感的な方法です。
手順
- Microsoft Edgeでソースを見たいWebページを開きます
- ページ上の何もない部分（テキストや画像がない場所）で右クリックします
- 表示されたメニューから「ページのソースを表示」を選択します
すると、新しいタブが開いて、そのページのHTMLコードが表示されます。
この方法は誰でもすぐに使えるので、初めてソースを見る方におすすめです。コードが読みやすく色分け（シンタックスハイライト）されているのも嬉しいポイントですね。
【方法2】キーボードショートカットを使う
慣れてくると、キーボードショートカットが一番速くて便利です。
Ctrl + U キーを同時に押す
これだけで、すぐにページのソースコードが新しいタブに表示されます。
右クリックする手間が省けるので、何度もソースを確認する作業をしている時は、このショートカットを覚えておくと作業効率が大幅にアップしますよ。
【方法3】開発者ツールで詳しく調べる
「もっと詳しくコードを見たい」「JavaScriptもチェックしたい」という方には、開発者ツール（DevTools）がおすすめです。
開発者ツールの開き方は3通り
- F12キーを押す（最も簡単）
- Ctrl + Shift + I キーを同時に押す
- 右クリックメニューから「検証」または「要素の検査」を選択する
開発者ツールが開くと、画面の下部または右側に新しいパネルが表示されます。
開発者ツールでできること
- Elementsタブ：HTMLとCSSを同時に確認・編集できます
- Sourcesタブ：JavaScriptファイルを見られます
- Networkタブ：読み込まれているファイルやリソースを確認できます
- Consoleタブ：エラーメッセージやデバッグ情報を表示します
ソース表示ができない時の対処法
「右クリックメニューに表示されない」というトラブルに遭遇することがあります。
よくある原因と解決方法
原因1：テキストエディタの設定が影響している
秀丸エディタやEmEditorなどのテキストエディタで「Internet Explorerのソース表示」機能を有効にしていると、Edgeでソース表示が正常に動作しないことがあります。
解決方法
- 使用しているテキストエディタの設定を開く
- 「Internet Explorerでソース表示」または「ブラウザの関連付け」の設定を探す
- その設定のチェックを外す
- Edgeを再起動する
原因2：開発者ツールを一度も起動していない
Edgeでは、初めて使う時に開発者ツールを一度起動しないと、右クリックメニューに表示されないことがあります。
解決方法
- F12キーを押して開発者ツールを起動する
- すぐに閉じてもOK
- その後、右クリックメニューに「ページのソースを表示」が表示されるようになります
原因3：Windowsのバージョンが古い
Windows 10の初期バージョンでは、ソース表示に関するバグがありました。
解決方法
Windows Updateを実行して、最新バージョンに更新しましょう。2015年11月の更新プログラム（Version 1511）以降では、この問題は解消されています。
ソースコードの見方のコツ
初めてソースコードを見ると、膨大な量の文字に圧倒されてしまうかもしれません。でも大丈夫、コツを押さえれば読みやすくなります。
押さえておきたいポイント
1. 検索機能を活用する
ソースコード表示中にCtrl + Fを押すと、検索ウィンドウが開きます。
調べたい単語（「color」「font」「title」など）を入力すれば、該当箇所がハイライト表示されるので、目的のコードを素早く見つけられますよ。
2. HTMLの基本構造を理解する
Webページは基本的にこんな構造になっています。
- headタグ：ページのタイトルやメタ情報が書かれている部分
- bodyタグ：実際に表示される内容が書かれている部分
- scriptタグ：JavaScriptのコードが書かれている部分
- styleタグ：CSSのスタイル情報が書かれている部分
これらのタグを目印にすると、コードの中を移動しやすくなります。
3. 整形されたコードとされていないコードがある
一部のWebサイトでは、コードが圧縮（ミニファイ）されていて、改行やスペースがほとんど削除されています。これは表示速度を上げるための工夫ですが、人間には読みにくいです。
そんな時は、オンラインのコード整形ツール（HTML Beautifier）などを使うと、読みやすく整形できます。
開発者ツールの便利な使い方
せっかく開発者ツールを開いたなら、ソース表示以外の機能も活用してみましょう。
要素の検証（インスペクト）
特定の要素（テキスト、画像、ボタンなど）のコードだけを見たい時に便利です。
使い方
- 見たい要素の上で右クリック
- 「検証」を選択
- 開発者ツールが開き、その要素のHTMLコードがハイライト表示されます
同時に、右側のパネルでその要素に適用されているCSSも確認できるので、「このボタンの色はどうやって指定されているんだろう」といった疑問もすぐに解決できますよ。
レスポンシブデザインのチェック
開発者ツールには、スマートフォンやタブレットでの表示を確認できる機能もあります。
使い方
- 開発者ツールを開く（F12）
- ツールバーのデバイスモード切り替えアイコン（スマホとタブレットのアイコン）をクリック
- またはCtrl + Shift + Mを押す
画面サイズを切り替えて、モバイル表示を確認できます。
ソース表示を使う時の注意点
便利なソース表示機能ですが、いくつか注意しておきたいポイントがあります。
サーバー側のコードは見られない
ソース表示で見られるのは、ブラウザに送られてきたHTML、CSS、JavaScriptだけです。
PHPやPythonなどのサーバー側で動いているプログラムのコードは、セキュリティ上の理由から見ることができません。これは正常な仕様なので、心配しないでくださいね。
コードをコピーする時は著作権に注意
他のサイトのコードを参考にするのは学習に役立ちますが、そのまま丸ごとコピーして自分のサイトに使うのは著作権侵害になる可能性があります。
あくまで参考程度にとどめて、自分なりにアレンジして使うようにしましょう。
編集した内容は保存されない
開発者ツールでHTMLやCSSを編集できますが、これは一時的な変更です。
ページを更新（リロード）すると元に戻ってしまうので、実際にサイトを変更したい場合は、サーバー上のファイルを編集する必要があります。
まとめ：自分に合った方法でソース表示を活用しよう
Microsoft Edgeでページのソースを表示する方法を3つご紹介しました。
おさらい
- 右クリック → 「ページのソースを表示」（初心者におすすめ）
- Ctrl + U（慣れたら便利なショートカット）
- F12またはCtrl + Shift + I（詳しく調べたい時は開発者ツール）
どの方法も簡単なので、まずは気軽に試してみてください。
ソース表示を使えるようになると、Webページの仕組みが分かってきて、プログラミング学習やWebデザインの理解が深まります。また、「このサイト、どうやって作っているんだろう」という好奇心を満たせるのも楽しいポイントですね。
もし表示されない場合は、上記のトラブルシューティングを参考にしてみてください。ほとんどの問題は、F12キーを一度押すか、テキストエディタの設定を見直すことで解決できますよ。
ぜひEdgeのソース表示機能を活用して、Webの世界をもっと深く楽しんでください！
コメント