【初心者向け】Chromeでソースを表示する方法｜HTMLコードを見る完全ガイド

「このサイトはどうやって作られているんだろう？」
「HTMLコードを勉強したいから、実際のサイトのソースを見たい」
「画像のURLを知りたい」
「サイトの構造を確認したい」

こんな風に思ったことはありませんか？

実は、Chromeでは簡単にウェブページのソースコード（HTML）を表示できるんです。ソースコードを見れば、サイトがどのように構成されているか、どんな技術が使われているかが分かります。

この記事では、Chromeでソースコードを表示する方法を、初心者の方にも分かるように詳しく解説していきます。基本的な表示方法から、開発者向けの高度な機能まで、幅広くカバーしますよ。

スポンサーリンク
  1. ソース表示って何？
    1. HTMLコードとは？
    2. なぜソースを見るの？
    3. ソース表示の種類
  2. 【方法1】ページのソース全体を表示する（一番簡単！）
    1. ショートカットキーで表示（最速）
    2. 右クリックメニューから表示
    3. Chromeメニューから表示
    4. アドレスバーから表示（裏技）
  3. 【方法2】特定の要素を検証する（便利！）
    1. 要素の検証とは？
    2. 検証の手順
    3. デベロッパーツールの見方
    4. カーソルで要素を選択
  4. 【方法3】スマホでソースを表示する
    1. Android版Chromeでの表示方法
    2. iPhone版Chromeでの表示方法
  5. ソースコードの見方・読み方
    1. HTMLの基本構造
    2. よく見るタグの意味
    3. CSSの見方（デザイン設定）
  6. ソースコードの実用的な使い方
    1. 使い方1: 画像のURLを取得する
    2. 使い方2: コピー禁止サイトからテキストをコピー
    3. 使い方3: CSSをカスタマイズして遊ぶ
    4. 使い方4: 不要な要素を削除する
    5. 使い方5: フォントやカラーコードを確認
    6. 使い方6: レスポンシブデザインの確認
  7. デベロッパーツールの便利な機能
    1. Console（コンソール）
    2. Network（ネットワーク）
    3. Application（アプリケーション）
    4. Lighthouse（監査）
  8. ソースコードの検索方法
    1. ソース内を検索する
    2. デベロッパーツールでの検索
  9. トラブルシューティング
    1. 問題1: ソースが文字化けしている
    2. 問題2: ソース表示ができない（右クリック禁止）
    3. 問題3: デベロッパーツールが英語で分かりにくい
    4. 問題4: ソースが長すぎて見づらい
    5. 問題5: JavaScriptで動的に生成されているコンテンツが見られない
  10. ソース表示に関する法律と倫理
    1. 合法的な行為
    2. 注意が必要な行為
    3. 絶対にやってはいけない行為
  11. よくある質問と回答
    1. Q1: ソースを見たことはサイト運営者にバレる？
    2. Q2: スマホでもPC版と同じようにソースが見られる？
    3. Q3: 「ページのソース」と「検証」の違いは？
    4. Q4: ソースコードを見ても何も分からない…
    5. Q5: ソースコードを保存できる？
  12. まとめ: ソース表示を活用しよう

ソース表示って何？

ソース表示とは、ウェブページの設計図ともいえるHTMLコードを見る機能のことです。

HTMLコードとは？

HTML（エイチティーエムエル）は、ウェブページを作るための言語です。

例えば、あなたが今見ているこのページも、裏側ではこんな感じのコードで書かれています：

<h1>記事のタイトル</h1>
<p>これは段落です。</p>
<img src="画像.jpg" alt="説明">
<a href="リンク先.html">リンク</a>
  • <h1> – 大見出し
  • <p> – 段落（文章）
  • <img> – 画像
  • <a> – リンク

これらのタグを組み合わせて、ウェブページが作られているんです。

なぜソースを見るの？

ソースコードを見ると、以下のようなことができます：

学習目的：

  • HTML/CSSの勉強になる
  • 他のサイトのデザインや構造を参考にできる
  • プロのコードを見て学べる

実用的な目的：

  • 画像のURLを取得できる
  • テキストをコピーできる（コピー禁止サイトでも）
  • サイトに使われている技術を確認できる
  • エラーの原因を調査できる

開発・制作目的：

  • 自分のサイトのバグを発見できる
  • 競合サイトの分析ができる
  • SEO対策の確認ができる

ソース表示の種類

Chromeには、ソースを見る方法が複数あります：

  1. ページのソース表示 – HTMLコード全体を一気に見る
  2. 要素の検証 – 特定の部分だけを詳しく見る（開発者ツール）
  3. JavaScriptコンソール – プログラムの動作を確認する

それぞれ詳しく見ていきましょう。

【方法1】ページのソース全体を表示する（一番簡単！）

まずは、ページ全体のHTMLコードを一気に見る方法です。

ショートカットキーで表示（最速）

これが最も簡単で速い方法です。

手順：

  1. ソースを見たいページを開く
  2. キーボードで以下を押す：
  • Windowsの場合: Ctrl + U
  • Macの場合: Command + Option + U

すると、新しいタブが開いて、HTMLコードが表示されます！

右クリックメニューから表示

マウス操作だけでも表示できます。

手順：

  1. ページのどこかを右クリック
  2. メニューから「ページのソースを表示」を選択

これだけでOKです。

Chromeメニューから表示

手順：

  1. Chrome右上の「︙」（3つの点）をクリック
  2. 「その他のツール」にカーソルを合わせる
  3. 「デベロッパーツール」を選択
  4. 上部のタブから「Sources」をクリック

少し手順が多いですが、この方法でも見られます。

アドレスバーから表示（裏技）

手順：

アドレスバーに以下を入力：

view-source:https://見たいサイトのURL

例：

view-source:https://www.example.com

Enterキーを押すと、そのページのソースが表示されます。

【方法2】特定の要素を検証する（便利！）

ページ全体ではなく、特定の部分だけを詳しく調べたい時に便利です。

要素の検証とは？

要素の検証（または「要素を調査」）は、ページの特定の部分にカーソルを合わせて、そこのコードだけを見る機能です。

例えば：

  • この画像のURLは何？
  • このボタンの色はどうやって設定されている？
  • この文章のフォントサイズは？

こういった疑問に、ピンポイントで答えられます。

検証の手順

手順：

  1. 調べたい部分（画像、文字、ボタンなど）を右クリック
  2. メニューから「検証」を選択
  3. デベロッパーツールが開いて、その要素のコードが表示される

画面が2つに分かれて、下半分（または右半分）にコードが表示されます。

デベロッパーツールの見方

デベロッパーツールが開くと、以下のような画面になります：

Elements タブ（要素）：

  • 左側: HTMLコード
  • 右側: CSS（デザイン設定）

選択した要素がハイライト表示されるので、どこを見ているか一目瞭然です。

カーソルで要素を選択

もっと便利な使い方があります。

手順：

  1. デベロッパーツールの左上の矢印アイコン（要素選択ツール）をクリック
  2. ページ上の調べたい部分にカーソルを合わせる
  3. その部分が青くハイライトされる
  4. クリックすると、そのコードが表示される

マウスでなぞるだけで、次々と要素を調べられて便利です！

【方法3】スマホでソースを表示する

スマートフォンでもソースコードを見られます。

Android版Chromeでの表示方法

方法1: アドレスバーから

  1. Chromeでページを開く
  2. アドレスバーのURLの前に view-source: を追加
  3. 例: view-source:https://www.example.com

方法2: 専用アプリを使う

「View Source」や「HTML Viewer」などのアプリをインストールすると、より見やすく表示できます。

おすすめアプリ：

  • View Source – シンプルで使いやすい
  • HTML Viewer – シンタックスハイライト付き

iPhone版Chromeでの表示方法

残念ながら、iPhone版のChromeでは標準的な方法でソース表示ができません。

代替方法：

方法1: Safari を使う

  1. Safariでページを開く
  2. アドレスバーのURLの前に view-source: を追加

方法2: ショートカットアプリを使う

iOSの「ショートカット」アプリで、ソース表示用のショートカットを作成できます。

方法3: 専用アプリを使う

App Storeで「HTML Viewer」や「Source Code Viewer」を検索してインストール。

ソースコードの見方・読み方

ソースコードが表示されても、どう読めばいいか分からない方のために、基本的な見方を説明します。

HTMLの基本構造

HTMLコードは、以下のような構造になっています：

<!DOCTYPE html>
<html>
<head>
    <!-- ページの設定情報 -->
    <title>ページタイトル</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 実際に表示される内容 -->
    <h1>見出し</h1>
    <p>本文</p>
</body>
</html>

主要な部分：

  • <head> – ページの裏方情報（タイトル、文字コード、CSSなど）
  • <body> – 実際に画面に表示される内容
  • <!-- コメント --> – 人間が読むためのメモ（画面には表示されない）

よく見るタグの意味

見出し：

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

文章：

<p>これは段落です。</p>
<br>  <!-- 改行 -->

リンク：

<a href="リンク先のURL">クリックできる文字</a>

画像：

<img src="画像のURL" alt="画像の説明">

リスト：

<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

グループ分け：

<div class="コンテナ">
    <!-- 複数の要素をまとめる -->
</div>

CSSの見方（デザイン設定）

デベロッパーツールの右側には、CSSが表示されます。CSSは見た目を決める設定です。

.見出し {
    color: blue;           /* 文字色: 青 */
    font-size: 20px;       /* 文字サイズ: 20ピクセル */
    font-weight: bold;     /* 太字 */
}

よく見るプロパティ：

  • color – 文字の色
  • background-color – 背景の色
  • font-size – 文字のサイズ
  • width – 幅
  • height – 高さ
  • margin – 外側の余白
  • padding – 内側の余白

ソースコードの実用的な使い方

ソース表示を使った、便利なテクニックをご紹介します。

使い方1: 画像のURLを取得する

サイトで使われている画像のURLを知りたい時。

手順：

  1. 画像を右クリック→「検証」
  2. デベロッパーツールで <img src="..."> を探す
  3. src="..." の中のURLが画像のアドレス
  4. URLを右クリック→「新しいタブで開く」で画像を直接表示

または：

  1. 画像を右クリック→「画像アドレスをコピー」

こちらの方が簡単です。

使い方2: コピー禁止サイトからテキストをコピー

右クリック禁止やコピー禁止のサイトでも、ソースからならコピーできます。

手順：

  1. Ctrl + U（Mac: Command + Option + U）でソース表示
  2. コピーしたいテキストを探す
  3. 普通に選択してコピー

注意：
著作権には十分注意してください。個人利用の範囲内にとどめましょう。

使い方3: CSSをカスタマイズして遊ぶ

デベロッパーツールを使えば、サイトのデザインを一時的に変更できます。

手順：

  1. 要素を右クリック→「検証」
  2. 右側のCSSパネルで数値や色を変更
  3. リアルタイムで変化が見える

例：

  • 文字の色を変える
  • ボタンのサイズを大きくする
  • 背景色を変更する

変更は自分のブラウザだけに反映され、ページを再読み込みすれば元に戻ります。

使い方4: 不要な要素を削除する

邪魔な広告や要素を一時的に消せます。

手順：

  1. 消したい要素を右クリック→「検証」
  2. デベロッパーツールでハイライトされた行を右クリック
  3. 「Delete element」（要素を削除）を選択

広告や邪魔なポップアップを消して、快適に読めます。

注意：
これも一時的なもので、再読み込みすれば元に戻ります。

使い方5: フォントやカラーコードを確認

サイトで使われているフォントや色を確認できます。

手順：

  1. 調べたい文字を右クリック→「検証」
  2. 右側のStylesパネルを見る
  3. font-family でフォント名を確認
  4. color でカラーコード（例: #FF0000）を確認

自分のサイト制作の参考にできます。

使い方6: レスポンシブデザインの確認

画面サイズによってデザインがどう変わるか確認できます。

手順：

  1. デベロッパーツールを開く（F12）
  2. 左上のスマホ・タブレットアイコンをクリック
  3. 画面サイズを変更してデザインの変化を確認

詳しくは、前回の「Chromeスマホ表示」の記事をご覧ください。

デベロッパーツールの便利な機能

ソース表示以外にも、デベロッパーツールには便利な機能がたくさんあります。

Console（コンソール）

JavaScriptのエラーやログを確認できます。

使い方：

  1. デベロッパーツールの「Console」タブをクリック
  2. エラーメッセージ（赤い文字）が表示される
  3. サイトが正常に動作しない原因を調べられる

Network（ネットワーク）

ページの読み込み状況を確認できます。

使い方：

  1. 「Network」タブをクリック
  2. ページを再読み込み（Ctrl + R）
  3. どのファイルがどれくらいの時間で読み込まれたか表示される

分かること：

  • ページの読み込み速度
  • 画像やCSSのファイルサイズ
  • 読み込みが遅い原因

Application（アプリケーション）

Cookie、ローカルストレージなどを確認できます。

使い方：

  1. 「Application」タブをクリック
  2. 左側のメニューから確認したい項目を選択
  3. Cookie、ローカルストレージ、セッションストレージなどが見られる

Lighthouse（監査）

サイトのパフォーマンスやSEOをチェックできます。

使い方：

  1. デベロッパーツールの「Lighthouse」タブをクリック
  2. 「Analyze page load」をクリック
  3. パフォーマンス、アクセシビリティ、SEOなどのスコアが表示される

自分のサイトの改善点を見つけられます。

ソースコードの検索方法

長いソースコードから特定の文字列を探す方法です。

ソース内を検索する

手順：

  1. ソースを表示した状態で Ctrl + F（Mac: Command + F）を押す
  2. 検索ボックスが表示される
  3. 探したい文字列を入力
  4. 該当箇所がハイライトされる

例：

  • 「mail」で検索→メールアドレスを探す
  • 「jpg」で検索→画像ファイルを探す
  • 「copyright」で検索→著作権表記を探す

デベロッパーツールでの検索

手順：

  1. デベロッパーツールを開く
  2. Ctrl + F（Mac: Command + F）を押す
  3. Elementsタブ内を検索できる

より高度な検索も可能です：

  • Ctrl + Shift + F（Mac: Command + Option + F）
  • すべてのファイル（HTML、CSS、JavaScriptなど）を横断検索できる

トラブルシューティング

ソース表示がうまくいかない時の対処法です。

問題1: ソースが文字化けしている

原因：
文字エンコーディングの設定が間違っている

解決方法：

  1. ソース表示ページで右クリック
  2. 「エンコード」または「文字コード」を選択
  3. 「UTF-8」または「Shift_JIS」を試す

問題2: ソース表示ができない（右クリック禁止）

原因：
サイト側が右クリックを無効にしている

解決方法：

  • ショートカットキー Ctrl + U を使う
  • または F12 でデベロッパーツールを開く
  • アドレスバーに view-source: を追加

これらの方法は、右クリック禁止でも使えます。

問題3: デベロッパーツールが英語で分かりにくい

原因：
デベロッパーツールは基本的に英語表示

解決方法：

主要な英単語だけ覚えれば大丈夫です：

  • Elements = 要素
  • Console = コンソール
  • Sources = ソース
  • Network = ネットワーク
  • Delete = 削除
  • Copy = コピー

問題4: ソースが長すぎて見づらい

原因：
HTMLが圧縮されて改行がない

解決方法：

  1. ソースコードをコピー
  2. オンラインの「HTML整形ツール」に貼り付け
  3. 整形されて見やすくなる

または、デベロッパーツールの「Elements」タブを使えば、自動的に見やすく表示されます。

問題5: JavaScriptで動的に生成されているコンテンツが見られない

原因：
Ctrl + U で表示されるのは、最初のHTMLのみ

解決方法：

「検証」（右クリック→検証）を使う。デベロッパーツールでは、JavaScriptで追加された要素も見られます。

ソース表示に関する法律と倫理

ソースコードを見る際の注意事項です。

合法的な行為

以下は問題ありません：

  • 学習目的でソースを見る – 勉強のために見るのはOK
  • 自分のサイトのバグ調査 – 自分のサイトなら何でもOK
  • 公開情報の確認 – 一般に公開されている情報を見るのはOK

注意が必要な行為

以下は注意が必要です：

  • ソースコードをそのままコピー – 著作権侵害になる可能性
  • 他人のサイトのデザインを完全に模倣 – デザインの盗用
  • 個人情報を探す – プライバシー侵害

絶対にやってはいけない行為

以下は違法です：

  • 脆弱性を悪用する – ハッキング行為
  • 不正アクセスを試みる – 犯罪行為
  • ソースコードを販売する – 著作権侵害

基本原則：
学習や参考のために見るのは問題ありませんが、悪用は厳禁です。

よくある質問と回答

Q1: ソースを見たことはサイト運営者にバレる？

A: バレません。ソースを表示するのは、あなたのブラウザ内で行われる操作なので、サイト側には記録されません。普通にページを見るのと同じです。

Q2: スマホでもPC版と同じようにソースが見られる？

A: 基本的に同じソースコードですが、スマホ版には「レスポンシブデザイン」で異なる表示になっている部分があります。デベロッパーツールで確認するのが正確です。

Q3: 「ページのソース」と「検証」の違いは？

A:

  • ページのソース（Ctrl + U） – 最初に読み込まれたHTMLのみ
  • 検証（右クリック→検証） – JavaScriptで動的に変更された後の状態

動的なサイトの場合、「検証」の方が実際の表示に近いです。

Q4: ソースコードを見ても何も分からない…

A: 最初は誰でもそうです。以下から始めると理解しやすいです：

  1. <h1> や <p> など簡単なタグを探す
  2. 画像の <img> タグを探してURLを確認
  3. 徐々に他のタグも覚えていく

HTMLの基礎を少し勉強すると、グッと理解が深まりますよ。

Q5: ソースコードを保存できる？

A: はい、保存できます。

  1. Ctrl + U でソース表示
  2. Ctrl + S で保存
  3. 拡張子を .html にして保存

ただし、CSS や画像は別途保存する必要があります。

まとめ: ソース表示を活用しよう

Chromeでソースコードを表示する方法を詳しく解説しました。

重要ポイントのおさらい:

✅ ショートカットキーが最速 – Ctrl + U で全体表示、右クリック→検証で部分表示

✅ デベロッパーツールが便利 – Elements、Console、Network など多機能

✅ スマホでも表示可能 – view-source: をURLの前に追加

✅ 実用的な使い方が多数 – 画像URL取得、CSS確認、要素削除など

✅ 学習に最適 – 実際のサイトから学べる

覚えておきたいショートカット:

操作WindowsMac
ソース全体を表示Ctrl + UCommand + Option + U
デベロッパーツールF12Command + Option + I
要素選択モードCtrl + Shift + CCommand + Option + C
ソース内検索Ctrl + FCommand + F

こんな時に活用しよう:

  • HTML/CSSを勉強したい時
  • サイトのデザインを参考にしたい時
  • 画像やリンクのURLを知りたい時
  • 自分のサイトのバグを調査したい時
  • コピー禁止サイトからテキストを取得したい時

ソース表示は、Web制作者だけでなく、一般のユーザーにも役立つ便利な機能です。

最初は難しく感じるかもしれませんが、使っているうちに慣れてきます。まずは Ctrl + U を試してみて、ウェブページの裏側を覗いてみましょう。きっと新しい発見がありますよ！

この記事は2025年11月時点の情報に基づいています

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました