はじめてのWeb開発 HTMLとCSSで自分のページを作ろう
第 1 章

はじめに
― Webサイトのしくみを知ろう

コードを書き始める前に、「Webページはどうやって表示されるのか」を 大まかに理解しておきましょう。しくみがわかると、後でつまずいたときに 原因を見つけやすくなります。

1. Webサイトが表示されるまで

普段ブラウザでWebサイトを見るとき、画面の裏側では次のことが起きています。

Webページが表示されるまでの流れ

① 要求

あなたがブラウザのアドレスバーにURLを入力してEnterを押す。
ブラウザが「このページのファイルをください」とサーバーに要求を送る。

↓
② 返送

サーバーが要求されたHTMLファイルをブラウザに送り返す。

↓
③ 表示

ブラウザがHTMLファイルを読み込んで、画面に表示する。

つまりWebページの正体は、サーバーに置かれたテキストのファイルです。 ブラウザはそのファイルを受け取り、人間が読みやすい形に変換して表示しています。

サーバーは「ファイル置き場」
サーバーとは、ファイルを保管してブラウザからのリクエストに答え続ける コンピュータのことです。本格的なWebサイトはインターネット上のサーバーに ファイルを置きますが、XAMPPを使うと自分のパソコンの中だけで 同じことができます。

2. HTMLとCSSの役割

Webページは主に2種類のファイルで作られています。

HTML

HyperText Markup Language

ページの内容と構造を作るファイル。
「ここは見出し」「ここは本文」「ここにリンク」といった骨格を定義する。

CSS

Cascading Style Sheets

ページの見た目を整えるファイル。
「文字を赤に」「余白を20px」「背景を青に」といったデザインを担当する。

家に例えると…
HTMLは「柱・壁・床」などの構造（骨組み）。 CSSは「壁紙・床の色・カーテン」などの内装デザイン。 どちらもあって、はじめてきれいなWebページになります。

3. ファイルの「拡張子」を確認しよう

HTMLファイルとCSSファイルは、ファイルの名前の末尾（拡張子）で区別されます。

Windowsは初期設定だと拡張子が非表示になっています。 コードを書くときは表示しておくと便利なので、次の手順で設定を変えましょう。

拡張子を表示する手順（Windows 11）

  1. エクスプローラー（フォルダ）を開く。
  2. 上部メニューの 「表示」 をクリックする。
  3. 「表示」→ 「ファイル名拡張子」 にチェックを入れる。
  4. ファイル名に .html や .txt が表示されるようになればOK。

拡張子を表示する手順（Windows 10）

  1. エクスプローラーを開く。
  2. 上部の 「表示」 タブをクリックする。
  3. 「ファイル名拡張子」のチェックボックスをオンにする。

4. 練習用フォルダを作ろう

これから作るファイルをまとめておく場所を用意します。 XAMPPでページを表示するには、C:\xampp\htdocs\ の中にファイルを置く必要があります。

練習用フォルダを作る手順

  1. エクスプローラーで C:\xampp\htdocs\ を開く。
  2. フォルダの中の何もない場所で右クリックする。
  3. 「新規作成」→「フォルダー」をクリックする。
  4. フォルダ名を practice と入力してEnterを押す。

これで C:\xampp\htdocs\practice\ というフォルダができました。 この中に、これから作るすべてのファイルを入れていきます。

フォルダ名やファイル名は半角英数字・ハイフン・アンダースコアだけを使いましょう。 日本語や全角文字を使うと、ブラウザで正しく表示されないことがあります。

5. 最初のHTMLファイルを作ってみよう

さっそく、ごく簡単なHTMLファイルを作ってブラウザに表示させてみましょう。 コードの意味は次の章で詳しく説明するので、今は「こう書くんだ」とざっくり 感じるだけでOKです。

VS Code でファイルを作る

  1. VS Code を起動する。
  2. メニューから 「ファイル」→「フォルダーを開く」 をクリックする。
  3. 先ほど作った C:\xampp\htdocs\practice フォルダを選んで 「フォルダーの選択」 をクリックする。
  4. 左側のパネルに practice フォルダが表示される。
  5. 左パネルのフォルダ名の横にある 「新しいファイル」アイコン（） をクリックする。
  6. ファイル名を index.html と入力してEnterを押す。

コードを入力する

右側のエディタ画面に、次のコードをそのまま入力してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>

  <h1>こんにちは！</h1>
  <p>はじめてのWebページです。</p>

</body>
</html>
入力するときの注意
< や > は半角で入力してください。 全角の「＜」「＞」を使うと正しく動きません。 また、"（ダブルクォーテーション）も半角です。

ファイルを保存する

  1. キーボードの Ctrl + S を押して保存する。
  2. VS Code のタブに表示されていた「●」マークが消えれば保存完了。
ファイルを変更したあとは Ctrl + S で保存する癖をつけましょう。 保存していないとブラウザで確認しても変更が反映されません。

ブラウザで確認する

  1. XAMPP コントロールパネルを開き、Apacheが起動していることを確認する（緑色になっていればOK）。起動していなければ 「Start」 を押す。
  2. ブラウザを開いて、アドレスバーに次のURLを入力してEnterを押す。
http://localhost/practice/index.html

画面に「こんにちは！」という大きな文字と、 「はじめてのWebページです。」という文が表示されましたか？

おめでとうございます！
これがあなたの最初のWebページです。 コードを書いてブラウザに表示する、という基本的な流れが体験できました。

この章のまとめ

次の章では、今書いたHTMLコードの一行一行が何を意味するのかを くわしく学んでいきます。