Webサイトを制作する上で、まず知っておきたいのが「Webサイトがどうやって表示されるのか」という仕組みです。ここではブラウザからURLを入力してページが表示されるまでの流れと、関わる要素をひとつずつ確認していきます。
Webサイトの表示に必要な4つの要素
Webサイトを表示するためには、以下の4つの要素が連携して動いています。
① Webブラウザ
WebブラウザはWebページを閲覧するためのアプリケーションです。Webサーバーにあるファイルデータを指定されたレイアウトで表示する役割を持っています。代表的なブラウザには Safari・Google Chrome・Microsoft Edge・Firefox があります。
ここでは主に Google Chrome を利用している前提で進めます。
② ドメイン
ドメインは英語で「領土・領域・範囲」を意味します。Webの世界では、WebサイトやサーバーなどのIPアドレスを人間がわかりやすい形にしたもので、世界に一つだけ存在します。
https://www.example.com
↑ ↑
ホスト名 ドメイン名（セカンドレベル＋トップレベル）「www」はドメインの一部ではなく、Webサーバーを示すホスト名（サブドメイン）です。この区別は現場でも重要な知識となります。
③ IPアドレス
IPアドレスはインターネットに接続する端末や機器に割り当てられる識別番号です。3桁の数字をピリオドで区切った4つの組み合わせで表されます。接続中の端末1台1台に一意の値が割り当てられます。
例）198.51.100.1④ WebサーバーとDNS
WebサーバーはWebサーバーソフトとWebサイトの構成ファイルを格納している通信機器です。インターネットに接続されており、アクセスしてきた端末にデータを提供します。
DNS（Domain Name System）はドメインとIPアドレスの管理をするシステムです。ネームサーバー（DNSサーバー）がドメイン名をIPアドレスに変換する「名前解決」を行います。「ドメイン名とIPアドレス（サーバー）を紐付ける」「ネームサーバーの切り替え」という表現は現場でよく使われます。
Webサイトが表示される5つのステップ
ブラウザにURLを入力してからページが表示されるまでは、次の順番で処理が進みます。
- ブラウザがWebページのURLをDNSサーバーに送信する
- DNSサーバーがドメインに紐づくIPアドレスを返答する
- 取得したIPアドレスでWebサーバーに接続し、データをリクエストする
- WebサーバーがリクエストにHTML・CSS・画像などのデータを返す
- ブラウザが取得したデータを描画（レンダリング）してページを表示する
キャッシュとは？
一度閲覧したWebページや画像などのデータを一時的にハードディスクへ保存することをキャッシュと呼びます。同じWebサイトを再び表示する際、サーバーと通信しなくてもローカルに保管されたデータから呼び出せるため、ページの高速表示が可能になります。
コーディング中に修正が反映されない場合はキャッシュが原因のことが多いです。Cmd＋Shift＋R（Mac）／ Ctrl＋F5（Windows）でスーパーリロードして確認しましょう。
Webで使われる代表的なプログラミング言語
Webサイトはさまざまな言語で作られています。どの言語がどんな場面で使われているかを大まかに把握しておきましょう。
| 言語 | 主な用途・特徴 |
|---|---|
| HTML / CSS | 全てのWebサイトの骨組みと見た目を作る。全ブラウザが理解する世界標準。 |
| JavaScript / jQuery | 全てのWebサイトに「動き」をつける。 |
| PHP | WordPress・Facebook・Wikipediaなどで使用。Web制作に特化し情報が豊富。 |
| Python | AI（ChatGPT）・Instagram・YouTubeなどで使用。AI・機械学習・データ分析の標準。 |
| Ruby | クックパッド・GitHubなどで使用。開発スピードが非常に速く、スタートアップに人気。 |
| Go | メルカリ・PayPay・Uberなどで使用。処理速度が極めて速く、大量アクセスに強い。 |
ここでは HTML / CSS / JavaScript（jQuery） を中心に学習していきます。
まとめ
WebサイトはブラウザがDNSサーバーにIPアドレスを問い合わせ、Webサーバーからデータを受け取り、レンダリングすることで表示されます。この基本的な仕組みを理解しておくと、エラーが発生したときの原因特定がスムーズになります。次は実際にWebサイトが作られるまでの制作フローを見ていきましょう。
