ウェブサイトを見ているとき、「このページはどんなコードで作られているんだろう？」と思ったことはありませんか？
Microsoft Edgeには、ウェブページのソースコード（HTML）を簡単に表示できる機能が備わっています。
この記事では、ソースコードを表示する複数の方法から、開発者ツールの使い方、トラブルシューティングまで、初心者の方にもわかりやすく解説していきます。プログラミングの勉強中の方や、ウェブサイト制作に興味がある方は、ぜひ参考にしてください。
ソースコードとは？
ソースコードとは、ウェブページを作るための設計図のようなものです。
具体的には、HTML（ハイパーテキスト・マークアップ・ランゲージ）というマークアップ言語で書かれたテキストのこと。このHTMLコードに、CSS（スタイルシート）やJavaScript（プログラム）を組み合わせて、私たちが普段見ているウェブページが作られているんです。
ソースコードを見ることで、次のようなことがわかります。
ページの構造
- 見出しや段落がどのように配置されているか
- 画像やリンクがどこに設置されているか
使われている技術
- どんなCSSフレームワークを使っているか
- どんなJavaScriptライブラリが使われているか
SEO対策の内容
- メタタグの設定
- 構造化データの実装方法
プログラミング学習中の方にとっては、他のサイトのコードを見て学ぶことは、とても良い勉強方法の一つです。
ソースコードを表示する4つの方法
Microsoft Edgeでは、目的に応じて複数の方法でソースコードを表示できます。
方法1: ショートカットキー「Ctrl + U」（最も簡単）
これが最も簡単で素早い方法です。
- ソースコードを見たいページを開く
- キーボードの「Ctrl」キーと「U」キーを同時に押す
- 新しいタブでソースコードが表示される
この方法の特徴：
- 一瞬で表示できる
- 別タブで開くので、元のページと見比べやすい
- 行番号が表示される
- シンタックスハイライト（色分け）付きで見やすい
- 行の折り返し機能がある
初めてソースコードを見る方や、さっと確認したいときにおすすめの方法です。
方法2: 右クリックメニューから表示
マウス操作で簡単に表示できる方法です。
- ソースコードを見たいページを開く
- ページ上の何もない場所で右クリック
- 表示されたメニューから「ページのソースを表示」をクリック
- 新しいタブでソースコードが表示される
ポイント: 画像やリンクの上で右クリックすると、別のメニューが表示されてしまうので、必ず「何もない場所」で右クリックしましょう。
この方法も、Ctrl + Uと同じように別タブで表示されます。シンプルにHTMLコードだけを見たい場合に便利です。
方法3: F12キー（開発者ツール）
より詳細な情報を確認したいときは、開発者ツールを使います。
- ソースコードを見たいページを開く
- キーボードの「F12」キーを押す
- 画面の下部または右側に開発者ツールが表示される
開発者ツールの主な機能：
- 要素タブ: HTML構造をツリー形式で表示
- コンソールタブ: JavaScriptのエラーや動作確認
- ソースタブ: ファイル単位でコードを表示
- ネットワークタブ: ページの読み込み状況を確認
- スタイルタブ: CSSの設定を確認・編集
開発者ツールでは、HTMLを見るだけでなく、実際にコードを編集して変更を試すこともできます（変更は一時的で、ページを再読み込みすると元に戻ります）。
方法4: メニューから開く
F12キーが使えない環境の場合は、メニューから開くこともできます。
- 画面右上の「…」（設定など）をクリック
- 「その他のツール」にマウスを合わせる
- 「開発者ツール」をクリック
または、ショートカットキー「Ctrl + Shift + I」でも開発者ツールを起動できます。
「ページのソースを表示」と「開発者ツール」の違い
初心者の方が混乱しやすいのが、この2つの違いです。簡単に説明しますね。
ページのソースを表示（Ctrl + U）
表示されるもの: サーバーから送られてきた元のHTMLコード
特徴：
- 静的なHTML（変更前の状態）
- シンプルで見やすい
- テキストとして表示される
- 別タブで開く
- 読み取り専用
こんなときに使う：
- HTMLの基本構造を確認したい
- メタタグの内容を見たい
- シンプルにコードを確認したい
- コードをコピーしたい
開発者ツール（F12）
表示されるもの: JavaScriptで動的に変更された後の、実際に表示されているHTML
特徴：
- 動的なHTML（現在の状態）
- 多機能で詳細な情報が見られる
- ツリー形式で表示される
- 画面下部や右側に表示される
- 編集して動作確認ができる
こんなときに使う：
- JavaScriptで変更された内容を確認したい
- CSSのスタイルを確認・変更したい
- エラーをデバッグしたい
- ネットワークの通信を確認したい
- パフォーマンスを測定したい
具体例で理解しよう
例えば、ボタンをクリックすると文字が変わるページがあったとします。
- ページのソースを表示: クリック前の元の文字が表示される
- 開発者ツール: クリック後の変わった文字が表示される
このように、JavaScriptで動的に変更される部分を確認したい場合は、開発者ツールを使う必要があるんです。
開発者ツールの基本的な使い方
F12キーで開いた開発者ツールには、たくさんの機能がありますが、まずは基本的な3つのタブを覚えましょう。
要素（Elements）タブ
何ができる？
- HTMLの構造をツリー形式で確認
- 特定の要素をクリックして選択
- リアルタイムでコードを編集してプレビュー
使い方：
- 開発者ツールの「要素」タブをクリック
- HTMLのツリーが表示される
- 要素の横にある三角マークをクリックすると展開される
- 要素の上にマウスを置くと、ページ上でその部分がハイライトされる
便利な機能：
左上の「要素を選択」ボタン（矢印のアイコン）をクリックしてから、ページ上の気になる部分をクリックすると、その部分のHTMLコードが自動的に選択されます。
コンソール（Console）タブ
何ができる？
- JavaScriptのエラーメッセージを確認
- JavaScriptコードを実行してテスト
- デバッグ用のメッセージを表示
使い方：
- 「コンソール」タブをクリック
- エラーがあれば赤い文字で表示される
- 下部の入力欄でJavaScriptコードを実行できる
JavaScriptの学習中の方にとって、コンソールは強力な味方です。簡単なコードをその場で試せるので、プログラミングの練習にぴったりなんです。
ソース（Sources）タブ
何ができる？
- ページで使われているすべてのファイルを確認
- JavaScriptのデバッグ
- ブレークポイント（一時停止ポイント）の設定
使い方：
- 「ソース」タブをクリック
- 左側にファイル一覧が表示される
- ファイルをクリックすると、中身が表示される
複雑なウェブサイトの構造を理解したいときに便利です。
開発者ツールのカスタマイズ
開発者ツールは、自分の使いやすいように配置を変更できます。
表示位置の変更
開発者ツールが開いている状態で、右上の「…」をクリックすると、以下の配置を選べます。
下部にドッキング（デフォルト）
- ページの下に表示される
- 横幅を広く使える
右側にドッキング
- ページの右側に表示される
- ワイドディスプレイに最適
左側にドッキング
- ページの左側に表示される
- 左利きの方に便利
別ウィンドウ
- 完全に独立したウィンドウで表示
- デュアルディスプレイ環境で便利
個人的には、ワイドディスプレイを使っているなら「右側にドッキング」、ノートパソコンなら「下部にドッキング」がおすすめです。
テーマの変更
開発者ツールの設定（歯車アイコン）から、明るいテーマと暗いテーマを切り替えられます。
暗いテーマは目に優しいので、長時間コードを見る場合におすすめです。
ソースコードの見方のコツ
初めてソースコードを見ると、たくさんの文字が並んでいて圧倒されるかもしれません。でも、いくつかのポイントを押さえれば、だんだん読めるようになってきます。
HTMLの基本構造を理解する
HTMLは、タグと呼ばれる記号で囲まれています。
基本的なタグ：
<html>: ページ全体を囲むタグ<head>: ページの情報（タイトル、メタタグなど）<body>: 実際に表示される内容<h1>～<h6>: 見出し<p>: 段落<div>: ひとまとまりのブロック<a>: リンク<img>: 画像
最初は、これらの基本的なタグに注目して見ていくと理解しやすいです。
シンタックスハイライトを活用する
Ctrl + Uで表示したソースコードには、色分け（シンタックスハイライト）が付いています。
色の意味（一般的な例）：
- 青色: HTMLタグ
- 赤色: 属性の値
- 緑色: コメント（説明文）
- 黒色: テキスト内容
色を手がかりにすると、コードの構造が理解しやすくなります。
インデント（字下げ）に注目する
整理されたコードは、階層構造に応じて字下げ（インデント）されています。
インデントが揃っているコードは読みやすく、構造も理解しやすいです。逆に、インデントがバラバラなコードは、読みにくいだけでなく、エラーの原因にもなりやすいんです。
ページ内検索を活用する
ソースコードの中から特定の文字列を探したいときは、ページ内検索が便利です。
- Ctrl + Uでソースを表示
- 「Ctrl + F」を押す
- 検索ボックスに探したい文字列を入力
例えば、「copyright」と検索すれば、著作権表記の場所がすぐに見つかります。
よくあるトラブルと解決方法
ソースコードを表示しようとしたときに、うまくいかないことがあります。よくある問題と解決方法を紹介します。
右クリックメニューに「ページのソースを表示」が出ない
原因：
- テキストエディタ（EmEditorや秀丸エディタなど）のブラウザ連携機能が有効になっている
- 一度Edgeがフリーズした後の状態
解決方法1: F12キーを一度押す
- F12キーを押して開発者ツールを開く
- 開発者ツールを閉じる
- もう一度右クリックしてみる
多くの場合、これで「ページのソースを表示」メニューが復活します。
解決方法2: テキストエディタの設定を変更
使っているテキストエディタの設定で、「Internet Explorerのソース表示」や「ブラウザの関連付け」の設定を無効にしてください。
F12キーを押しても開発者ツールが開かない
原因: F12キーのショートカットが無効になっている
解決方法：
- Edgeの右上の「…」をクリック
- 「設定」を選択
- 左側のメニューから「アクセシビリティ」をクリック
- 「キーボード」の項目にある「F12キーを使用して開発者ツールを開きます」のスイッチをオンにする
- Edgeを再起動する
これで、F12キーが使えるようになります。
ソースコードの文字が読めない・文字化けする
原因: 文字エンコーディングの問題
解決方法：
Ctrl + Uで表示したソースコードは、基本的にUTF-8で表示されます。古い日本語サイトでShift_JISを使っている場合、一部の文字が正しく表示されないことがあります。
この場合は、開発者ツール（F12）の「要素」タブで確認するか、ソースコードをテキストエディタにコピーして文字コードを変更して表示しましょう。
「このページはセキュリティで保護されています」と表示される
原因: ページ自体が右クリックを無効にしている
一部のウェブサイトでは、セキュリティやコンテンツ保護のために右クリックを無効にしています。
解決方法：
右クリックが使えない場合でも、以下の方法なら使えます。
- Ctrl + U（ショートカットキー）
- F12（開発者ツール）
- メニューから開発者ツールを開く
ただし、著作権で保護されているコンテンツのコードを無断で複製・利用することは避けましょう。
ソースコードを見るときの注意点
ソースコードは誰でも自由に見られますが、いくつか注意すべき点があります。
著作権に配慮する
ソースコードを見ることは合法ですが、そのコードをそのままコピーして自分のサイトで使うことは、著作権侵害になる可能性があります。
OK：
- 勉強のために見る
- 仕組みを理解する
- アイデアの参考にする
NG：
- コードをそのままコピーして使う
- デザインを丸ごと真似する
- 他人のコードを自分の作品として公開する
他人のコードを参考にするのは良いことですが、あくまで学習のためと考え、自分の言葉（コード）で書き直すようにしましょう。
セキュリティに関する情報に注意
ソースコードの中に、APIキーやパスワードなどの重要な情報が含まれていることがあります。
これらの情報を悪用すると犯罪になりますし、自分のコードを書くときも、重要な情報をソースコードに直接書かないように気をつけましょう。
最新の情報とは限らない
ブラウザはページを高速表示するために、一度読み込んだファイルを「キャッシュ」として保存しています。
そのため、ソースコードを見ても、最新のコードではなく古いキャッシュが表示されることがあります。
最新のコードを確認したい場合は、「Ctrl + F5」でページを強制再読み込みしてから、ソースコードを表示しましょう。
ソースコードを見て学べること
最後に、ソースコードから学べる具体的な内容を紹介します。
SEO対策の方法
メタタグの設定
<head>タグの中を見ると、SEO対策に使われるメタタグが確認できます。
<title>: ページのタイトル<meta name="description">: ページの説明文<meta name="keywords">: キーワード（最近は重要度が低い）<meta property="og:～">: SNSでシェアされたときの表示設定
人気サイトのメタタグを見ると、どんな工夫をしているかがわかります。
レスポンシブデザインの実装方法
スマートフォン対応（レスポンシブデザイン）がどのように実装されているかも、ソースコードから学べます。
<meta name="viewport">タグや、CSSのメディアクエリ（画面サイズに応じた表示切り替え）などを確認してみましょう。
使われているライブラリやフレームワーク
<script>タグを見ると、どんなJavaScriptライブラリが使われているかがわかります。
- jQuery: 昔からある人気のJavaScriptライブラリ
- React: 最近人気のJavaScriptフレームワーク
- Bootstrap: CSSフレームワーク
- Google Analytics: アクセス解析ツール
これらを知ることで、自分のサイト制作の参考にできます。
ページの構造
見た目は複雑なウェブサイトでも、ソースコードを見ると意外とシンプルな構造だったりします。
特に、<header>（ヘッダー）、<nav>（ナビゲーション）、<main>（メインコンテンツ）、<footer>（フッター）のような、意味のあるタグ（セマンティックタグ）がどう使われているかを見ると勉強になります。
まとめ
Microsoft Edgeでソースコードを表示する方法について解説してきました。
ソースコード表示の方法：
- Ctrl + U: 最も簡単で素早い（別タブで表示）
- 右クリック→ページのソースを表示: マウスで簡単に操作
- F12キー: 開発者ツールで詳細な解析が可能
- メニュー→その他のツール→開発者ツール: キーが使えないときに便利
使い分けのポイント：
- シンプルにHTMLを見たい → Ctrl + U
- CSSやJavaScriptも含めて詳しく調べたい → F12（開発者ツール）
- 動的に変更された後の状態を見たい → F12（開発者ツール）
学習のコツ：
- 最初は簡単なページから見てみる
- 基本的なHTMLタグから覚える
- 色分けとインデントに注目する
- 気になるサイトのコードを見て学ぶ
ソースコードを見ることは、ウェブ制作を学ぶ上でとても有効な方法です。
最初は難しく感じるかもしれませんが、たくさんのサイトのコードを見ているうちに、だんだんパターンが見えてきます。お気に入りのウェブサイトや、デザインが素敵だと思ったサイトのソースコードを見て、「このサイトはこんな風に作られているんだ」と発見する楽しさを味わってください。
ただし、見たコードをそのままコピーするのではなく、あくまで学習の参考として、自分なりに理解して応用していくことが大切です。
これからウェブ制作を学びたい方、すでに学習中の方、どちらにとっても、ソースコードを見る習慣をつけることは、きっと大きな財産になりますよ。
コメント