Webページのソースコード(HTML)を見たいとき、Firefoxには便利な機能が用意されています。
この記事では、Firefoxでページのソースを表示する方法を、初心者にもわかりやすく解説します。
ページのソースを表示する基本的な方法
Firefoxでは、Webページのソースコードを表示する方法がいくつか用意されています。
自分に合った方法を選んで使いましょう。
方法1:ショートカットキーで表示
最も簡単で素早い方法は、キーボードショートカットを使うことです。
Windows・Linux:
Ctrl + U
Mac:
Command + U
このショートカットを押すと、新しいタブでページのソースコードが表示されます。
方法2:右クリックメニューから表示
マウスで操作したい場合は、右クリックメニューを使います。
- Webページの何もない部分で右クリック
- メニューから「ページのソースを表示(V)」をクリック
新しいタブでソースコードが表示されます。
方法3:メニューバーから表示
Firefoxのメニューから開くこともできます。
- 画面右上のメニューボタン(≡)をクリック
- 「その他のツール」にマウスを合わせる
- 「ウェブ開発」を選択
- 「ページのソース」をクリック
または、メニューバーが表示されている場合:
- 「ツール」メニューをクリック
- 「ウェブ開発」を選択
- 「ページのソース」をクリック
ソース表示画面の機能
Firefoxのソース表示には、コードを見やすくする便利な機能が搭載されています。
シンタックスハイライト
ソースコードが色分けされて表示されます。
- HTMLタグ:青色や紫色
- 属性名:茶色
- 属性値:緑色
- テキスト:黒色
この色分けにより、コードの構造が理解しやすくなります。
行の折り返し
長い行を画面幅に合わせて折り返す機能です。
設定方法:
ソース表示画面の上部にある「行を折り返す」オプションにチェックを入れます。
エラーの表示
HTMLの構文エラーが赤色で強調表示されます。
エラー部分にマウスを合わせると、エラーの内容がツールチップで表示されます。
特定の行にジャンプ
大きなファイルで特定の行を見たいときに便利です。
Windows・Linux:
Alt + Shift + L
Mac:
Control + Option + L
行番号を入力するダイアログが表示されます。
URLで直接行を指定
URLの末尾に #lineNNN を追加すると、指定した行にジャンプできます。
例:
view-source:https://www.example.com/#line100この場合、100行目が表示されます。
選択した部分のソースを表示
Firefoxには、ページの一部分だけのソースを表示する機能もあります。
基本的な使い方
- ソースを見たい部分をマウスでドラッグして選択
- 選択した部分で右クリック
- 「選択した部分のソースを表示」をクリック
「選択した部分のDOMソース」というウィンドウが開き、選択した部分のHTMLが表示されます。
ページ全体を選択
Ctrl + A(Mac: Command + A)でページ全体を選択してから「選択した部分のソースを表示」を使うと、JavaScript実行後のHTMLを含めたソースを確認できます。
通常のソース表示との違い
通常のソース表示:
- サーバーから送信された元のHTMLを表示
- JavaScriptで追加・変更された内容は含まれない
選択した部分のソース表示:
- JavaScriptで動的に生成・変更された内容も含む
- 実際に表示されている内容のHTMLを確認できる
保存方法
選択した部分のDOMソースウィンドウで:
Ctrl+S(Mac:Command+S)を押す- ファイル名を付けて保存
JavaScriptの実行結果を含めた状態でHTMLファイルとして保存できます。
外部エディタでソースを開く設定
普段使っているテキストエディタでソースを開くように設定できます。
設定手順
1. about:configを開く
アドレスバーに about:config と入力してEnterキーを押します。
2. 警告を確認
「細心の注意を払って使用する」ボタンをクリックします。
3. 外部エディタを有効化
検索欄に view_source と入力します。
view_source.editor.external という項目を探して右クリックし、「切り替え」を選択します。
値が false から true に変わります。
4. エディタのパスを設定
view_source.editor.path という項目をダブルクリックします。
使いたいテキストエディタの実行ファイルのフルパスを入力します。
Windows の例:
C:\Program Files\Notepad++\notepad++.exeまたは
C:\Program Files\Microsoft VS Code\Code.exeMac の例:
/Applications/Visual Studio Code.app/Contents/MacOS/Electron5. Firefoxを再起動
設定を有効にするため、Firefoxを一度閉じて再起動します。
使用方法
設定後は、「ページのソースを表示」を選択すると、指定したエディタでソースが開きます。
開発者ツールとの違い
Firefoxには「ページのソース表示」以外に「開発者ツール」という機能もあります。
ページのソース表示の特徴
- サーバーから送信された元のHTMLをそのまま表示
- 静的なコードの確認に向いている
- シンプルで軽い
- テキストエディタのように編集はできない
開発者ツール(インスペクタ)の特徴
- JavaScriptで動的に変更された現在のDOM(Document Object Model)を表示
- リアルタイムでHTMLやCSSを編集・プレビューできる
- 要素の検索や絞り込みが簡単
- CSSスタイルの詳細が確認できる
- JavaScriptデバッグも可能
開発者ツールの開き方
ショートカットキー:
F12 または Ctrl + Shift + I(Mac: Command + Option + I)
右クリックメニュー:
ページ上で右クリック → 「要素を調査」
どちらを使うべきか
ページのソース表示が向いているケース:
- 元のHTMLコードを確認したい
- メタタグやhead要素の内容をチェックしたい
- ソースコード全体をコピーしたい
- 軽量に素早くコードを見たい
開発者ツールが向いているケース:
- 特定の要素のCSSを確認・変更したい
- JavaScriptで動的に生成された要素を調べたい
- レイアウトやデザインをその場で調整したい
- JavaScriptのデバッグをしたい
スマートフォンでのソース表示
Androidの場合
重要な注意:
モバイル版Firefoxでは、ページのソース表示機能が利用できません。
代替方法1:ChromeやEdgeを使う
Android標準のChromeやMicrosoft Edgeを使います。
- ソースを見たいページのURLをコピー
- アドレスバーにURLの先頭に
view-source:を追加 - 例:
view-source:https://www.example.com/ - Enterキーをタップ
代替方法2:専用アプリを使う
Google Playストアで「View Source」などのソース表示専用アプリをインストールします。
iPhoneの場合
iOSでも、Firefoxではソース表示ができません。
代替方法:専用アプリを使う
App Storeで「View Source」アプリをダウンロードして使用します。
- アプリをインストール
- アプリ内でURLを入力
- ソースコードが表示される
ソース表示の活用例
Web制作・デザインの学習
気に入ったWebサイトのソースコードを見ることで、HTMLの書き方やCSSの使い方を学べます。
参考にしたい部分のコードをコピーして、自分のプロジェクトに応用できます。
SEO対策の確認
titleタグのチェック:
ページのタイトルタグが適切に設定されているか確認できます。
タイトルタグは検索エンジン結果に表示される重要な要素です。
metaタグのチェック:
- meta description:ページの説明文
- meta keywords:キーワード(現在はあまり重要ではない)
- meta robots:検索エンジンへの指示
構造化データの確認:
JSON-LD形式の構造化データが正しく記述されているか確認できます。
アナリティクスコードの確認
Google AnalyticsやGoogle Tag Managerのトラッキングコードが正しく設置されているか確認できます。
ソースコードを検索(Ctrl + F)して、トラッキングIDを探します。
セキュリティチェック
- 不要な個人情報やコメントが含まれていないか確認
- JavaScriptライブラリのバージョンをチェック
- 外部リソースの読み込み元を確認
エラー診断
HTMLの構文エラーを見つけて修正できます。
Firefoxのソース表示では、エラー箇所が赤く表示されます。
よくある質問
Q1:ソースコードを編集できますか?
A:ページのソース表示では編集できません。
編集したい場合は、開発者ツール(F12)を使用するか、ソースをコピーしてテキストエディタで編集してください。
Q2:JavaScriptで追加された要素が見えません
A:通常のソース表示では、サーバーから送信された元のHTMLのみが表示されます。
JavaScriptで動的に追加された要素を見るには、「選択した部分のソースを表示」または開発者ツールを使用してください。
Q3:ソースコードが文字化けします
A:ページの文字エンコーディングが正しく設定されていない可能性があります。
開発者ツールのネットワークタブで、レスポンスヘッダーの Content-Type を確認してください。
Q4:ソース表示のショートカットが動作しません
A:他のアプリケーションやブラウザ拡張機能がショートカットキーを使用している可能性があります。
右クリックメニューまたはメニューバーから試してください。
Q5:外部エディタの設定が反映されません
A:Firefoxを再起動しましたか?
about:configの設定変更後は、必ずFirefoxを再起動する必要があります。
トラブルシューティング
ソースが表示されない
対処法:
- ブラウザを最新版に更新
- キャッシュとCookieをクリア
- セーフモードで起動(アドオンを無効化)
- Firefoxを再インストール
右クリックメニューに「ページのソースを表示」が表示されない
原因:
Webページ側でJavaScriptによって右クリックが無効化されている可能性があります。
対処法:
ショートカットキー(Ctrl + U)を使用してください。
ソースコードが正しく表示されない
原因:
- ページが正しくロードされていない
- サーバー側のエラー
- ネットワークの問題
対処法:
- ページを再読み込み(
F5) - キャッシュをクリアしてから再読み込み(
Ctrl+F5) - 別のブラウザで試す
まとめ
Firefoxでページのソースを表示する方法はいくつかあります。
基本的な方法:
- ショートカットキー:
Ctrl+U(Mac:Command+U) - 右クリックメニュー:「ページのソースを表示」
- メニューバー:ツール → ウェブ開発 → ページのソース
便利な機能:
- シンタックスハイライト:コードが色分けされて見やすい
- 選択した部分のソース表示:JavaScriptで動的に変更された内容も確認可能
- 外部エディタ設定:使い慣れたエディタでソースを開ける
- 行ジャンプ:大きなファイルでも素早く目的の行に移動
活用シーン:
- Web制作の学習
- SEO対策の確認
- アナリティクスコードの検証
- セキュリティチェック
- エラー診断
Web開発やデザインの勉強をする上で、ソース表示は欠かせない機能です。
自分に合った方法を見つけて、効率的にソースコードを確認しましょう。
コメント