ホームページのソースコードをわかりやすく解説！基礎知識から表示方法まで

2025 12/06

2025/12/06

はじめに

この文書の目的

この文書は、ホームページの「ソースコード」を初めて学ぶ方向けに作りました。専門用語をできるだけ減らし、具体例を交えて丁寧に説明します。読むことで、ホームページがどのように作られているかの基礎をつかめます。

対象読者

・自分のホームページを少しでも直してみたい初心者の方
・サイトの仕組みを知りたい学生や趣味の人
・ブラウザの画面の裏側に興味がある方
専門的な知識は不要です。パソコンやスマホの基本操作ができれば進められます。

本書で学べること（概要）

・ソースコードの役割と基本構造の見方
・ブラウザでソースコードを表示する方法
・代表的なHTMLタグの意味と使い方
・簡単な編集の流れと、よくあるつまずきの回避法
章を追うごとに、手を動かして理解できるように設計しています。

読み進め方のアドバイス

まずは難しく考えず、実際にブラウザでソースを表示してみてください。その後、少しずつタグの意味を確認すると分かりやすくなります。疑問が出たら、次の章で順を追って解説します。ご安心ください。

そもそも「ホームページのソースコード」とは？

ホームページのソースコードは、ブラウザに「どのように表示するか」を指示するテキストです。人が読みやすい文章ではなく、ブラウザが理解して画面に描くための命令の集まりです。

主な要素

HTML（構造）: 見出しや段落、リンクなどを定義します。例:

タイトル
CSS（見た目）: 色やレイアウトを決めます。例: body { background: #fff; }
JavaScript（動き）: ボタンを押したときの振る舞いなど動きをつけます。例: alert(‘こんにちは’)

これらが組み合わさってページが表示されます。単純なページはHTMLだけで動きますが、多くはCSSやJavaScriptが加わります。

どこで見られるか

多くのブラウザで右クリック→「ページのソースを表示」で確認できます。また、検証ツール（開発者ツール）で実際に読み込まれた状態の構造やスタイルを詳しく見ることもできます。

見ると役立つ場面

学習: どう作られているか学べます
問題解決: 表示が崩れる原因を探せます
参考: デザインや実装のアイデアを得られます

注意点

ホームページのソースコードを実際に表示する方法

まずは「ページのソース」と「開発者ツール」の違い

ページのソース（View Source）は、サーバーから送られてきた元のHTMLをそのまま表示します。静的な構造を確認するときに便利です。
開発者ツール（DevTools）は、開いた後のHTML（DOM）やCSS、JavaScriptの処理、ネットワーク通信などをリアルタイムで確認できます。ボタン操作で内容が変わるページなどは、開発者ツールで実際の表示状態を見ると分かりやすいです。

ブラウザ別の表示方法

Chrome（Windows/Linux）: 右クリック→「ページのソースを表示」またはCtrl+U。開発者ツールはF12キーか右クリック→検証。
Chrome（Mac）: 右クリック→「ページのソースを表示」または⌘+Option+U。開発者ツールは⌘+Option+I。
Firefox: 右クリック→「ページのソースを表示」またはCtrl+U（Macは⌘+U）。開発者ツールはF12か右クリック→要素を検証。
Safari（Mac）: 事前に「開発」メニューを有効化（環境設定→詳細→“メニューバーに“開発”を表示”）。その後、開発→ページのソースを表示、または開発→要素を検証。
Microsoft Edge: 右クリック→「ページのソースを表示」またはCtrl+U。開発者ツールはF12。

実際に見るときのポイント

動的に変わる部分は開発者ツールで見ると現在の状態が分かります。
外部ファイル（CSSやJS）はリンクタグやネットワークタブで確認できます。
検索（Ctrl/Cmd+F）で特定の要素をすばやく見つけられます。

以上の方法で、自分の目的に合わせてソース表示と開発者ツールを使い分けてください。

ホームページのソースコードの基本構造を理解しよう

HTMLの最小構造の例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <h1>見出し</h1>
  <p>段落テキストです。</p>
  <img src="image.jpg" alt="画像の説明">
  <a href="https://example.com">リンク</a>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</body>
</html>

各要素の役割（わかりやすく）

<!DOCTYPE html>
ブラウザに「HTML5で書かれています」と伝えます。
ページ全体を囲む箱で、言語を指定します。検索や読み上げに役立ちます。
ページの設定や情報を置く場所です。画面には直接表示されません。
代表的な要素：
- meta charset: 文字コード（日本語ならutf-8）を指定します。
- title: ブラウザのタブに表示されるタイトルです。
- link: CSSを読み込んで見た目を整えます。
- script: JavaScriptを読み込んで動きを加えます（deferで読み込みを遅らせることが多いです）。
実際に画面に表示する内容を入れます。
よく使うタグ：
- 見出し（h1〜h6）: 文書の構造を示します。
- 段落（p）: 文章のかたまりです。
- 画像（img）: srcで画像、altで代替テキスト（説明）を必ず書きます。
- リンク（a）: 他のページや外部サイトへ飛びます。
- リスト（ul/ol + li）: 箇条書きや順序付きリストに使います。