Webサイトが表示される仕組み｜ブラウザ・サーバー・URLの基本

この記事の目次

Webサイトが表示される仕組みとは
基本（登場する役者と流れ）
具体例（URLの読み方）
実践のステップ（自分の目で確かめる）
Webサイトが表示される仕組みの注意点
Webサイトが表示される仕組みでよくあるミス
Webサイトが表示される仕組みのチェックリスト
Webサイトが表示される仕組みのFAQ（よくある質問）
筆者の見解（Webサイトが表示される仕組み）
Webサイトが表示される仕組みの関連項目
出典（一次情報）

Webサイトが表示される仕組みとは

Webサイトは、サーバーに置かれたファイル（HTML・CSS・JavaScript・画像など）を、ブラウザが受け取って組み立てたものです。ブラウザにURLを入れてから画面が出るまでには、「住所を調べる」「ファイルを頼む」「ファイルを受け取る」「組み立てる」という順番があります。

この順番を知っておくと、「画像だけ出ない」「自分のパソコンでは見えるのに公開すると見えない」といったトラブルの原因を、どこで起きているか切り分けられるようになります。この記事では、Web制作をはじめる人が最初に知っておきたい仕組みを、登場する役者ごとに整理します。

基本（登場する役者と流れ）

役者	やさしい言い換え	役割
ブラウザ	ページを見るアプリ	URLを受け取り、サーバーにファイルを頼み、組み立てて表示する
DNS	ドメインの電話帳	`example.com` のような名前を、IPアドレス（数字の住所）に変える
サーバー	ファイルの倉庫兼受付係	頼まれたファイルを探して返す
HTTP／HTTPS	会話のルール	「ください」「どうぞ」のやりとりの決まり。HTTPS は暗号化された版

表示までの流れは次のとおりです。

ブラウザのアドレスバーに URL を入れる。
ブラウザが DNS に問い合わせ、ドメイン名から IP アドレスを調べる。
ブラウザがそのサーバーに HTTP の「リクエスト」（ファイルをください）を送る。
サーバーが HTML ファイルを「レスポンス」として返す。
ブラウザが HTML を読み、書かれている CSS・JavaScript・画像を、続けて1つずつ頼んで受け取る。
ブラウザが全部を組み立てて、画面に表示する。

MDN（Mozilla が運営する Web 技術の解説サイト）も、ブラウザとサーバーのやりとりを「リクエストとレスポンス」として説明しています。HTTP の基本は、ブラウザ（クライアント）が頼み、サーバーが答える、という1往復の繰り返しです。

具体例（URLの読み方）

https://www.example.com/blog/post.html という URL は、次のように分けて読みます。

部分	例	意味
スキーム	`https`	どのルールで会話するか（暗号化あり）
ドメイン名	`www.example.com`	どのサーバーか（DNS で IP アドレスに変換）
パス	`/blog/post.html`	サーバーの中の、どのファイルか

パスが /blog/ のようにフォルダで終わっているときは、多くのサーバーが、そのフォルダの index.html を返すように設定されています。トップページのファイル名を index.html にするのはこのためです。

実践のステップ（自分の目で確かめる）

ふだん見ている Web サイトを開き、アドレスバーの URL をスキーム・ドメイン名・パスに分けて読みます。
キーボードの F12 キー（Mac は Command＋Option＋I）で開発者ツールを開き、「Network（ネットワーク）」タブを選びます。
ページを再読み込みし、一覧に HTML・CSS・画像などのファイルが1つずつ並ぶのを見ます。これが「頼んで受け取った」ファイルの一覧です。
一覧の1つをクリックし、「Status（状態）」が 200（成功）になっていることを確かめます。見つからないファイルは 404 と表示されます。

Webサイトが表示される仕組みの注意点

自分のパソコンでファイルを開いたとき、アドレスバーは file:///C:/... のようになります。これはサーバーを通さずに、パソコンの中のファイルを直接開いている状態で、まだ誰にも公開されていません。
HTTPS は、ブラウザとサーバーの間の通信を暗号化します。フォームで個人情報を送るページはもちろん、公開するサイトは HTTPS にするのが今の基本です。ただし、HTTPS は通信の途中を守る仕組みで、サイトの中身が安全かどうかを保証するものではありません。
お問い合わせフォームの送信やログインのように、サーバー側でプログラムが動く仕組みは、ファイルを返すだけの仕組みとは別に用意する必要があります。

Webサイトが表示される仕組みでよくあるミス

「インターネット＝ブラウザ」と考える： ブラウザは見るための道具で、ページのファイルはサーバーにあります。
画像が出ない原因をサーバーの故障だと思い込む： 多くは、HTML に書いた画像の場所（パス）が間違っていて、サーバーが「見つからない（404）」と答えているだけです。開発者ツールの Network で 404 の行を探します。
公開したのに古い表示のまま： ブラウザが前に受け取ったファイルを使い回している（キャッシュ）ことがあります。再読み込みで確かめます。

Webサイトが表示される仕組みのチェックリスト

[ ] ブラウザ・DNS・サーバーの役割を1つずつ言える
[ ] URL をスキーム・ドメイン名・パスに分けて読める
[ ] 開発者ツールの Network で、受け取ったファイルの一覧を見た
[ ] 200 と 404 の意味を言える

Webサイトが表示される仕組みのFAQ（よくある質問）

Q. サーバーは特別なコンピュータですか？

A. 仕組みとしては、頼まれたファイルを返すプログラムが動いているコンピュータです。Web 制作では、レンタルサーバーなどの会社が用意したものを借りるのが一般的です。

Q. DNS は自分で設定する必要がありますか？

A. ドメインとサーバーを同じ会社で用意すると、自動で設定されることが多いです。別々の会社のときは、ドメイン側で「どのサーバーにつなぐか」の設定が必要になります。

Q. HTTP と HTTPS の違いは何ですか？

A. HTTPS は、HTTP の通信を暗号化したものです。通信の途中で中身を盗み見られたり、書き換えられたりするのを防ぎます。

筆者の見解（Webサイトが表示される仕組み）

Web 制作の入門では、すぐにタグの書き方から始めがちですが、私は最初に「ページの正体はファイルで、ブラウザが頼んで受け取っている」という一点を押さえるのが近道だと考えます。この理解があると、表示されないトラブルの多くを「どのファイルが、どこで見つからないのか」という具体的な問いに置き換えられるからです。開発者ツールの Network タブは、この仕組みを目で見られる一番の教材だと思います。