0.はじめに

本講義では、HTML と CSS を使ってウェブページを作る方法を学びます。題材として、自己紹介ページを段階的に組み立てます。

このドキュメントでは、HTML / CSS を書き始める前の土台として、ウェブページの仕組みと開発環境を確認します。

1. Web の仕組み

1-1. クライアントとサーバー

ウェブページがブラウザーに表示されるのは、ブラウザーがサーバーからファイルを取得しているためです。

+----------------+                              +----------------+
|                |  ① URL のファイルを要求       |                |
|   ブラウザー    | --------------------------> |    サーバー     |
| (クライアント)  |                              |                |
|                | <-------------------------- |                |
|                |  ② HTML / CSS などを返す      |                |
+----------------+                              +----------------+

ブラウザーが ① で URL に対応するファイルをサーバーに要求し、② でサーバーから返ってきた HTML / CSS のファイルを受け取ります。受け取ったファイルをブラウザーが解釈して画面に表示します。

リクエストを送る側（ブラウザー）を クライアント、ファイルを返す側を サーバー と呼びます。

1-2. URL

URL はウェブ上のファイルの住所のようなものです。たとえば https://example.com/about という URL は、3 つの部分でできています。

https://example.com/about
└─┬──┘ └─────┬─────┘└──┬─┘
スキーム   ドメイン     パス

スキーム は通信方式（https:// など）、ドメイン はサーバーの名前、パス はサーバー内のファイルの場所を示します。ブラウザーは URL を受け取ると、ドメイン部分でサーバーを特定し、パス部分でそのサーバー内の特定のファイルを要求します。

1-3. ブラウザーの役割

ブラウザーはサーバーから受け取った HTML / CSS / JavaScript を解釈して画面に表示します。代表的なブラウザーには Google Chrome、Microsoft Edge、Mozilla Firefox、Safari（Mac）があります。

本講義では Google Chrome を使います。HTML / CSS の機能自体はどのブラウザーでも同じですが、画面例と開発者ツールの説明は Chrome を前提にしています。

ブラウザーには 開発者ツール という機能が標準で入っており、HTML / CSS の確認やデバッグに使えます。詳しくは ブラウザーの開発者ツール で扱います。

2. Web を構成する 3 つの要素

ウェブページは主に 3 つの言語で作られます。

言語	役割	主な要素・プロパティの例
HTML	内容と構造	<h1>, <p>, <a>
CSS	見た目	color, font-size, margin
JavaScript	動き	イベント、関数

3 つは組み合わせて使います。たとえば、押すとメニューが開くボタンを作る場合、HTML でボタンとメニューを配置し、CSS で見た目を整え、JavaScript で押されたときにメニューを表示する処理を実装します。

本講義では HTML と CSS を扱います。JavaScript は前の講義で学習済みです。

3. 開発環境

JavaScript の講義から引き続き VS Code を使います。HTML / CSS の編集を支援する拡張機能をいくつか紹介します。必須ではありませんが、入れておくと作業が楽になります。

• Live Server: HTML ファイルをローカルサーバーで配信し、保存するとブラウザーが自動で再読み込みされる
• Auto Rename Tag: 開きタグの名前を変更すると、閉じタグも自動で変わる
• HTML CSS Support: CSS のクラス名を HTML 内で補完する