はじめに
目的
この章では、本資料の目的と読み方をわかりやすく説明します。ホームページのソースコードを表示・解析する基本を身につけ、日常の作業や学習に役立てることを目指します。
対象読者
プログラミング初心者から中級者、ウェブ制作や検証を行う方まで幅広く想定しています。専門用語は最小限にし、具体例で補足します。
本資料の構成
本書は全4章です。各章では次の内容を扱います。
– ブラウザ別の表示方法（右クリックやショートカット）
– URLバーのview-sourceコマンドの使い方
– 開発者ツールを使った効率的な解析
章ごとに手順と画面の見方を丁寧に解説します。
注意点
表示されるソースはブラウザにより見え方が異なります。実際に手を動かして確認すると理解が深まります。
ブラウザ別ソースコード表示方法
Google Chrome
- ページ全体のソースを見る: WindowsはCtrl+U、MacはCommand+Option+Uで簡単に表示できます。右クリックメニューの「ページのソースを表示」でも可能です。例: 記事内のリンクのHTMLを確認したいとき。
- 詳細解析: F12またはCtrl+Shift+I（MacはCommand+Option+I）で開発者ツールを開きます。要素選択はCtrl+Shift+C（MacはCommand+Shift+C）。スタイルやネットワークも確認できます。
Firefox
- ソース表示: WindowsはCtrl+U、MacはCommand+Uで表示します。右クリックからも選べます。
- 開発者ツール: F12またはCtrl+Shift+I（MacはCommand+Option+I）。要素を直接選んでHTMLやCSSを確認できます。検索（Ctrl+F）で特定の文字列を探せます。
Microsoft Edge
- 基本操作: Chromeと同じショートカット（Ctrl+U、F12、Ctrl+Shift+C）が使えます。右クリックの「ページのソースを表示」からも開けます。
Safari（Mac）
- ページソース: 事前に「開発」メニューを有効にしてください（設定→詳細→メニューバーに“開発”を表示）。表示はOption+Command+Uまたは右クリックの「ページソースを表示」です。
- 開発者ツール: Option+Command+IでWebインスペクタを開き、Command+Shift+Cで要素選択できます。
どのブラウザも、簡単な確認ならソース表示（Ctrl+U等）、詳細な検査や編集は開発者ツール（F12系）を使うと便利です。
URLバーを使用したソースコード表示方法
概要
ブラウザのURLバーに「view-source:」を付けてページのアドレスを入力すると、そのページのHTMLソースを直接確認できます。操作はシンプルで、パソコンと一部のスマートフォンで使えます。マウスやキーボード操作の方が手早い場合が多いです。
デスクトップでの手順（例）
- 表示したいページを開きます。
- アドレスバーに「view-source:」を先頭に付けます。例: view-source:https://example.com
- Enterキーを押すと、ソースコードが新しいタブまたは同じタブに表示されます。
ポイント: 大半のデスクトップブラウザ（Chrome、Firefox、Edgeなど）は対応しています。URLの先頭に付けるだけなので簡単です。
スマートフォンでの手順
スマートフォンのブラウザでも同じ形式で試せますが、標準ブラウザでは制限されることがあります。方法:
1. ブラウザでページを開く。
2. アドレスバーを編集し「view-source:」を追加して読み込みます。
対応しない場合は、ブラウザ拡張や別のブラウザアプリを使うか、デスクトップで確認することをおすすめします。
注意点と補足
- すべてのブラウザやアプリで動くとは限りません。特に一部のモバイルブラウザはサポート外です。
- 動的に生成される内容（ボタンを押した後に出る情報など）は、この方法では完全に確認できないことがあります。開発者ツールを使えばより詳しく見られます。
簡単な方法でまず全体像を把握したいときに、URLバーからの表示は便利です。マウスやキーボードが使える環境なら、短時間で確認できます。
開発者ツールを活用した効率的な解析
開発者ツールとは
開発者ツールは、ブラウザ内でHTML・CSS・JavaScriptをリアルタイムに確認・編集できる機能です。表示の原因を素早く突き止めたり、動作エラーを探すときに役立ちます。
開き方（代表例）
- Windows/Mac共通: ページ上で右クリック→「検証」
- ショートカット: F12 または Ctrl(⌘)+Shift+I
HTMLの確認と編集（手順）
- Elements（またはInspector）タブを開く
- 左上の要素選択ツールでページ内の要素をクリック
- 該当のタグや属性（例: a の href）をダブルクリックして編集
編集は即時にページへ反映されます。元のファイルは変更されませんので安心です。
CSSの調査と調整
Stylesペインで、現在適用されるスタイルが階層ごとに表示されます。プロパティを追加・無効化して見た目を試せます。クラス名の切り替えや擬似要素の確認も可能です。
JavaScriptの確認とデバッグ
Consoleでエラーやログを確認します。簡単な操作例: document.querySelector(‘a’).href で最初のリンク先を表示できます。Sourcesタブではブレークポイントを設定して処理の流れを追えます。
ネットワークとリソース確認
Networkタブで画像やAPIのリクエスト・応答を確認します。ページをリロードすると通信の履歴が記録されます。読み込み遅延や404エラーの原因特定に便利です。
リンク属性を調べる具体的手順
方法A（ページソース）：Ctrl(⌘)+Uでソースを開き、検索（Ctrl(⌘)+F）で href=” を探します。
方法B（検証ツール）：要素選択でリンクをクリックし、Attributes欄で href を確認。右クリック→「リンクのアドレスをコピー」でURLを取得できます。
小さなコツ
- デバイスツールでスマホ表示を検証できます
- 編集内容は一時的なので、変更を反映するには実ファイルを修正してください
- よく使うタブのショートカットを覚えると作業が速くなります
これらの手順で、表示の原因追及や修正案の検証を効率よく進められます。
