はじめに
目的
このドキュメントは「ホームページ ソース」を知りたい初心者向けに作成しました。ホームページの見た目を作るHTML、装飾を担うCSS、動きをつけるJavaScriptの基本を整理し、表示・確認・簡単な編集の手順をわかりやすく伝えます。
対象読者
・自分でサイトの中身を見てみたい方
・ホームページの仕組みに興味がある方
・簡単な編集を試してみたい方
専門知識は不要です。パソコンやスマートフォンでブラウザを使える方を想定しています。
ここで学べること（例）
- ソースコードとは何か（例：HTML＝見出しや段落）
- ブラウザごとの見方の違い
- HTMLの基本構造の考え方
- 簡単な編集の流れと注意点
進め方
まずは実際にソースを見ることをおすすめします。小さな部分を変更してブラウザで確認することで理解が早まります。本書では手順を丁寧に追いながら進めます。
ホームページの「ソースコード」とは何か
ソースコードとは
ホームページのソースコードは、画面に表示される内容や動作を決めた「設計図」のようなテキストです。紙の設計図に寸法や配置が書かれているように、文字で構造や見た目、動きを指定します。
主な構成要素
- HTML（構造）: 見出しや段落、画像の位置を決めます。例:
タイトル
- CSS（デザイン）: 色や余白、フォントを指定します。例: body { color: #333; }
- JavaScript（動き）: ボタンの反応やアニメーションを作ります。例: ボタンを押すとメッセージを表示する処理
ブラウザとサーバーの関係
ソースコードは通常サーバーに置かれ、ブラウザが取得して解釈します。ブラウザはHTMLを読み、CSSで見た目を整え、JavaScriptで動きを追加します。これにより画面が完成します。
普段見ているものとの違い
私たちが見るホームページはソースコードの「結果」です。同じソースコードでも表示環境や端末で見え方が変わります。ソースを直接編集すると表示を変えられます。
覚えておくと便利な点
ソースコードを理解すると、表示の問題を直したり、自分好みにカスタマイズしたり、学習のスタートになります。専門用語は少しありますが、まずは構造・デザイン・動きの三つに分けて考えると分かりやすいです。
ホームページのソースコードを見る方法（各ブラウザ対応）
はじめに
ホームページのソースを見る基本は、右クリックメニューの「ページのソースを表示」とキーボードショートカットです。静的なHTMLを確認したいときに便利です。
基本の操作
- 右クリック→「ページのソースを表示」
- ショートカット：Windows/LinuxはCtrl+U、Macは⌘+option+U
Google Chrome
- ページ上で右クリック→「ページのソースを表示」。
- より詳しく解析するならデベロッパーツールを使います（ショートカット：F12 または Ctrl+Shift+I、Macは⌘+option+I）。
Firefox
- 右クリック→「ページのソースを表示」またはCtrl+U（Macは⌘+U）。
- 開発者ツールはF12やCtrl+Shift+Iで開き、要素の検査やコンソール確認ができます。
Safari（Mac）
- 事前に「開発」メニューを有効にします（Safariの環境設定→詳細→“メニューバーに“開発”を表示”）。
- 有効後、右クリック→「ページのソースを表示」か⌥+⌘+Uで開けます。開発メニューから「要素を検査」も使えます。
Microsoft Edge
- 右クリック→「ページのソースを表示」またはCtrl+U。
- デベロッパーツールはF12またはCtrl+Shift+Iで開きます。
デベロッパーツールの使い方（簡単）
- 「要素」パネルで実際にレンダリングされたHTMLを確認できます。CSSやイベントも確認しやすいです。
- 「ネットワーク」パネルで読み込みファイルをチェックできます。
注意点
- 動的に生成される内容は、単純なソース表示に出ない場合があります。動く部分はデベロッパーツールで確認してください。
ホームページのソースコードの基本構造を理解する
概要
ホームページは決まった骨組みで作られます。基本は <!DOCTYPE html>、<html>で全体を囲み、<head> に設定や読み込み、<body> に画面に表示する本文を置きます。順序を守るとブラウザが正しく表示します。
基本構造（例）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">（文字コード）
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">（CSS読み込み）
</head>
<body>
<h1>見出し</h1>
<p>段落テキスト</p>
</body>
</html>
よく使うタグと例
<h1>〜<h6>：見出し。数字が小さいほど重要度が高いです。<p>：段落。文章をまとめます。<img src="image.jpg" alt="説明">：画像。altは代替テキストで大切です。<a href="https://example.com">リンク</a>：別ページや外部のリンク。
属性と注意点
タグには属性（例：src、href、alt）があります。開くタグと閉じるタグの対応を意識し、入れ子（ネスト）を正しく書いてください。コメントは <!-- ここはコメント --> で記述します。
