Webサイトを作ってみたいけれど、そもそもどうやって動いているの？
HTMLとかサーバーとか、専門用語が多くて難しそう…
これからWeb制作やプログラミングを始めようとしている方にとって、Webの仕組みは最初の大きな壁ですよね。実は、Webサイトが表示される仕組みは、「注文住宅（家づくり）」や「レストラン」に例えると驚くほど簡単に理解できます。この記事では、現役webデザイナーの視点から、Webサイトが表示される裏側の仕組みと、制作に必要な基礎知識を、図解を交えて世界一わかりやすく解説します。
1. 「Webサイト」と「Webページ」の違いとは？
まず最初に、よく混同されやすい 「Webサイト」と「Webページ」 の違いを明確にしておきましょう。
この2つは似ているようで役割が異なります。イメージしやすいように「本」で置き換えて説明します。
Webページ ＝ 本の「1ページ」
今あなたが読んでいるこの記事や、Googleの検索トップ画面など、ブラウザに表示されている1枚1枚の画面のことです。
Webサイト ＝ ページの集まり（1冊の本）
複数のWebページがまとまった全体のことです。
つまり
Webページ： 記事A、記事B、トップページ、お問い合わせページ
Webサイト： 上記すべてを含んだ「〇〇ブログ」
全体ポイント： Web制作とは、1枚ずつの「Webページ」を作り、それを束ねて「Webサイト」として機能させる作業のことです。
Webページは何でできている？（構成要素）
Webページを構成するファイルは、主に以下の2つ（＋α）です。 これを「家づくり」に例えてみましょう。
| ファイル名 | 役割 | 家づくりでの例え |
| HTML | 構造・骨組み | 柱、梁、壁、床 |
| CSS | 見た目・装飾 | 壁紙、塗装、インテリア |
| (JavaScript) | (動き) | (電気、自動ドア) |
HTML（ハイパーテキスト・マークアップ・ランゲージ）
Webページの「骨格」を作るファイルです。 「ここにタイトルを表示する」「ここに画像を置く」「ここからここまでが本文」といった、文書の構造をブラウザに伝えます。
これがないとどうなる？： 真っ白な空間に文字が羅列されるだけで、何が重要かわかりません。
CSS（カスケーディング・スタイル・シート）
Webページの「デザイン」を指定するファイルです。 HTMLで作った骨格に対し、「文字を赤くする」「背景を水色にする」「スマホで見やすくレイアウトする」といった指示を出します。
これがないとどうなる？： 骨組みだけの殺風景な家（Webページ）になってしまいます。
補足： 近年のWeb制作では、ここにJavaScript（ジャバスクリプト）という「動き」をつける要素も加わりますが、まずは「HTML（骨組み）」と「CSS（見た目）」の2つが基本と覚えればOKです。
Webサイトが表示される仕組み（ブラウザとサーバーの関係）
私たちが普段URLをクリックしてから、画面が表示されるまでの裏側では、「レストランでの注文」と同じやり取りが行われています。
登場人物
Webブラウザ（お客さん）： ChromeやSafariなど。あなた（ユーザー）の代わりに注文をする人。
サーバー（厨房・シェフ）： インターネットの向こう側にある、データを保管しているコンピュータ。
URL（住所・注文票）： どの場所のどのデータが欲しいかという指示。
表示までの3ステップ
注文（リクエスト） あなたがブラウザ（お客さん）にURLを入力すると、ブラウザはインターネットを通じてサーバー（厨房）へ「このページ（料理）をください！」と注文を出します。
提供（レスポンス） サーバー（厨房）は注文を受け、保管してあるHTMLやCSS（食材）を探し出し、ブラウザへ渡します。
表示（レンダリング） ブラウザは受け取ったHTMLやCSSのデータを解読し、人間が見やすい形に組み立てて画面に表示します。
重要： サーバーから送られてくるのはあくまで「文字のデータ（コード）」です。それをブラウザが翻訳して綺麗な画面にしてくれているのです。
漫画で解説するとこんな感じ！
Web制作を始めるために必要な「2つの道具」
今すぐWeb制作を始めるのに、高価なソフトは必要ありません。以下の2つがあれば、無料でスタートできます。
① テキストエディタ（作る道具）
HTMLやCSSのコードを書くためのソフトです。Windowsの「メモ帳」でも書けますが、プロはより効率的に書ける専用のエディタを使います。
おすすめ： Visual Studio Code (VS Code)
世界中で最も使われている無料エディタ。入力補完機能などが優秀です。
② Webブラウザ（確認する道具）
書いたコードが意図通りに表示されるかチェックするために使います。
おすすめ： Google Chrome
「検証ツール（デベロッパーツール）」という機能が非常に強力で、プロの現場でも標準的に使われています。
まとめ：Webの仕組みを理解して制作を始めよう
- Webサイトの基本構造をおさらいしましょう。
- Webサイトは「Webページの集まり」。
- Webページは「HTML（骨格）」と「CSS（見た目）」でできている。
- 表示の仕組みは、ブラウザがサーバーからデータを貰い、人間に見える形に変換している。
- 必要な道具は「VS Code」と「Chrome」があればOK（無料！）。
この仕組みさえ分かってしまえば、あとは「HTMLという骨組みの書き方」と「CSSという装飾の指定方法」を学ぶだけで、あなただけのWebサイトを作ることができます。
Webの仕組みが分かったら、次は実際に手を動かしてみましょう。
次の記事では、CSSコードの基本と「文字を表示させるところ」から解説します。
コメント