何が見えるのか（具体例）

• HTML：ページの骨組み（見出し、段落、画像の配置）
• CSS：色、余白、フォント、レイアウトの指定
• JavaScript：ボタンを押したときの動きやデータのやり取り
• 画像やフォントなどの外部ファイルの参照先
• metaタグ：検索エンジン向けの説明や文字コード

なぜ他サイトのコードを見るのか

デザインやレイアウトの参考にできます。SEOタグや構造化データの確認、表示崩れの原因調査にも役立ちます。学習目的で読み解くと、自分のサイト改善につながります。

「ページのソース」と「開発者ツール（検証）」の違い

• ページのソース：ページのHTML全文をテキスト表示します。読みやすくコピーしやすいです。
• 開発者ツール（検証）：ブラウザ内でHTMLやCSSを動的に確認・編集できます。表示をその場で変えて試すことができ、JavaScriptの動作やエラーも調べられます。

初めてでも、見る対象と目的が分かれば使い分けは簡単です。

PCでWebサイトのコードを見る基本（共通イメージ）

概要

Webサイトのコードを見る方法は大きく2つあります。1つは「ページのソースを表示」、もう1つは「開発者ツール（検証）」です。用途に応じて使い分けると効率的です。

ページのソースを表示（静的なHTMLを見る）

• 何が見えるか：サーバーから送られてきた元のHTMLがそのまま表示されます。コメントや初期の構造が分かります。
• 開き方：右クリックして「ページのソースを表示」またはショートカット（Windows/Linux: Ctrl + U、Mac: Command + Option + U）。
• 注意点：JavaScriptで動的に追加された要素は反映されません。読み取り専用なのでここでの編集は保存されません。

開発者ツール（検証）（動的な表示やスタイル確認）

• 何が見えるか：ブラウザがレンダリングした現在のDOM（表示中の要素）や適用されているCSS、コンソールのログ、ネットワークリクエストなどが確認できます。
• 開き方：F12キー、または（Windows: Ctrl + Shift + I、Mac: Command + Option + I）。特定の要素を調べたいときは、その要素上で右クリックして「検証」を選びます。
• できること：HTMLやCSSを一時的に編集して表示を確認したり、レスポンシブ表示を切り替えたり、スクリプトのエラーを確認したりできます。変更はローカルのみでサーバーには反映されません。

使い分けの目安

• 元の構造やコメントを見たいときは「ページのソース」。
• 実際の表示やスタイル、動作を確認したいときは「開発者ツール」を使います。したがって、どちらも覚えておくと便利です。

よく使うショートカット一覧

• ページのソース：Windows/Linux: Ctrl + U、Mac: Command + Option + U
• 開発者ツール：Windows: F12 または Ctrl + Shift + I、Mac: Command + Option + I

そのほか、右クリックメニューから気軽に使えるので、まずは実際に開いて確認してみてください。

Google ChromeでWebサイトのコードを見る方法

ページのソース表示

ページ全体のHTMLをそのまま見るには、ページ上で右クリックして「ページのソースを表示」を選ぶか、ショートカットで開きます。Windows/LinuxはCtrl + U、MacはCommand + Option + Uです。新しいタブにテキストでHTMLが表示され、サーバーから送られた元のマークアップを確認できます。

開発者ツールの起動

開発者ツールはF12キーか、右クリックの「検証」で起動します。ツールは画面下や右に表示でき、ページを壊さずに要素を調べたり編集したりできます。

Elementsタブでの確認と編集

ElementsタブではDOM構造のHTMLと、その要素に適用されるCSSを確認できます。スタイルをクリックして直接編集すると、表示がすぐに変わるので見た目の調整を試せます。Computed（計算済み）やStyles（スタイル）で優先順位や継承も分かります。

特定要素の調査

ページ上の特定要素を右クリックし「検証」を選ぶと、その要素がツール内で強調表示されます。イベントリスナーや要素に関連するソースも確認でき、問題の原因を特定しやすくなります。

便利な機能

• 要素のコピー（HTMLやセレクタ）
• 検索（Ctrl/Command + F）でコード内を検索
• デバイスツールバーでスマホ表示を確認
  ちょっとした変更を試すのに便利な機能が揃っています。

Microsoft EdgeでWebサイトのコードを見る方法

はじめに

Microsoft Edgeでも、ページのコードを簡単に確認できます。ここでは「ページのソース表示」と「開発者ツール」の基本操作を分かりやすく説明します。

ページのソース表示（静的なHTMLを見る）

• 右クリックメニューの「ページのソースを表示」を選ぶか、WindowsではCtrl + Uを押します。
• 表示されるのはサーバーから送られた元のHTMLです。動的にJavaScriptで変わった部分は反映されない点に注意してください。

開発者ツールを起動する（動的に確認・編集）

• F12キーを押すか、右上のメニュー→「その他のツール」→「開発者ツール」で開けます。Chromeとほぼ同じ操作感です。

Elementsタブの使い方（HTML・CSSを詳しく見る）

• Elementsタブで要素にマウスを重ねると該当箇所がハイライトされます。クリックで該当するHTMLを選択できます。
• HTMLを直接編集すると、ページに即時反映されます（保存はされません）。
• 右側のStyles欄でCSSルールを確認・無効化したり、新しいプロパティを追加できます。
• 右クリックから「Copy」→「Copy selector」や「Copy element」でコードを取得できます。

ConsoleやNetworkなどの基本機能

• ConsoleタブでJavaScriptのエラーやログを確認し、簡単なコマンドを直接実行できます。
• Networkタブで読み込み状況を確認します。リソースの遅延やサイズを調べたい時に便利です。ページを再読み込みして記録します。

モバイル表示の確認

• Ctrl + Shift + Mでデバイスエミュレーションに切り替えられます。画面サイズやユーザーエージェントを変えて表示を確かめられます。

ちょっとした便利技

• 要素内を検索するにはElements内でCtrl + Fを使います。
• 開発者ツールはウィンドウ下部や右側にドックできます。作業しやすい位置に変えてください。

これらの操作を覚えると、Edgeでも効率よくWebページの構造や見た目、動作を調べられます。試しにページを開いてF12で触ってみてください。

FirefoxでWebサイトのコードを見る方法

ページのソースを表示する

ページ全体のHTMLを素早く見るには、ページ上で右クリックして「ページのソースを表示」を選びます。ショートカットはWindowsでCtrl + U、MacでCommand + Uです。読みやすいプレーンテキストでHTML構造を確認できます。

開発者ツールを開く

詳細に調べるときは開発者ツールを使います。起動はF12、またはWindowsでCtrl + Shift + I、MacでCommand + Option + Iです。開発者ツールはブラウザ内でページを動的に観察・操作できます。

インスペクタでDOMとCSSを確認・編集する

インスペクタ（Inspector）タブを選ぶと、左側にDOMツリー、右側にCSSルールが表示されます。要素を選んでHTMLをダブルクリックすると直接編集できます。CSSはプロパティを追加・編集すると即時に反映されるので見た目を試行できます。ただし編集はローカル表示のみでページを再読み込みすると元に戻ります。

要素選択モード

特定の要素を簡単に選ぶには要素選択モードを使います。ショートカットはWindowsでCtrl + Shift + C、MacでCommand + Option + Cです。ページ上でマウスを動かしながら目的の要素をクリックすると、該当箇所がインスペクタで開きます。

その他の便利機能と注意点

コンソールでJavaScriptを実行して動作を確認できます。ネットワークタブで読み込み状況や通信を確認できます。編集はブラウザ側の一時的な変更なので、本番サイトに反映させるにはサーバー側のファイルを更新してください。初心者はまず見て操作を試し、元に戻す方法（リロード）を覚えておくと安心です。

ショートカット一覧

• ページのソース: Ctrl + U（Win）/ Command + U（Mac）
• 開発者ツール: F12 / Ctrl + Shift + I（Win）/ Command + Option + I（Mac）
• 要素選択モード: Ctrl + Shift + C（Win）/ Command + Option + C（Mac）

Safari（Mac）でWebサイトのコードを見る方法

はじめに

SafariでWebサイトのコードを見るには、まず開発メニューを表示する設定を行います。設定を一度済ませれば、ソース表示や要素の検証が簡単に使えます。

開発メニューを有効にする

1. Safariを開く
2. メニューバーから「Safari」→「環境設定」を選ぶ
3. 「詳細」タブを開き、「メニューバーに“開発”メニューを表示」にチェックを入れる

ページのソースを表示する

• 右クリックで「ページのソースを表示」を選ぶ
• または、メニューバーの「開発」→「ページのソースを表示」を選ぶ
• ショートカット: Option + Command + U
  ページのソースでは、読み込まれた元のHTMLが見えます。検索はCommand + Fで行います。

要素の検証（Webインスペクタ）

• 右クリックで「要素の検証」を選ぶ
• または、メニューバーの「開発」→「Webインスペクタを表示」を選ぶ
• ショートカット: Option + Command + C
  Webインスペクタでは、表示中のDOMを直接見る・編集できます。Stylesパネルで色や余白を変更し、見た目がどう変わるかリアルタイムで確認できます。ConsoleタブでJavaScriptのエラーやログを確認し、Networkタブで読み込み状況をチェックできます。

注意点

インスペクタでの変更は自分のブラウザだけに反映され、ページを再読み込みすると元に戻ります。編集はテストや学習に便利ですが、本番のコードを直接変えるわけではありません。