1-1 Webサイトが表示される仕組みを図解で理解する

Webサイトを開いたとき、私たちは何気なくページを見ていますが、
実際にはその裏側で多くの処理が行われています。

・URLを入力すると、なぜページが表示されるのか
・HTMLやPHPは、どこで動いているのか
・ブラウザとサーバーは、何をやり取りしているのか

これらを理解していないと、
エラーが出たときに「何が起きているのか分からない」状態になりがちです。

この記事では、Webサイトが表示されるまでの流れを、専門用語をできるだけ使わずに解説します。
この仕組みを理解することで、後のHTML・CSS・JavaScript・PHPの学習が一気に楽になります。

この記事で学べること
Webサイト表示の全体像
ブラウザの役割
サーバーの役割
URLを入力してから表示されるまで
HTML・CSS・JavaScript・PHPの役割まとめ
静的サイトと動的サイトの違い
この仕組みを理解すると何が変わるか
よくある勘違い
まとめ
次に読むべき記事

この記事で学べること

・Webサイトが表示されるまでの全体の流れ
・ブラウザとサーバーの役割
・HTML・CSS・JavaScript・PHPが動く場所
・エラーの原因を考えるための基礎知識

Webサイト表示の全体像

まず、Webサイトが表示されるまでの流れを、ざっくり確認します。

ブラウザにURLを入力する
サーバーに「ページをください」とお願いする
サーバーが処理をして、HTMLなどを返す
ブラウザが受け取った内容を画面に表示する

一見シンプルですが、この中で
役割の違う複数の技術が関わっています。

ブラウザの役割

ブラウザとは、
Chrome や Safari、Edge などの Webページを見るためのアプリです。

ブラウザの主な役割は次の3つです。

・サーバーにリクエストを送る
・受け取ったHTMLやCSSを解析する
・画面に表示し、JavaScriptを実行する

重要なのは、
ブラウザは「表示」と「操作」を担当しているという点です。

サーバーの役割

サーバーとは、
Webページのデータを保存し、要求に応じて返すコンピュータです。

サーバーの役割は次の通りです。

・HTMLや画像ファイルを保存する
・PHPなどのプログラムを実行する
・必要なデータを生成して返す

ここで覚えておきたいのは、
PHPはブラウザではなく、サーバー側で動くという点です。

URLを入力してから表示されるまで

もう少し具体的に見てみましょう。

① URLを入力する

例として、
https://example.com
をブラウザに入力したとします。

この時点で、ブラウザは
「このURLのページを表示したい」
というリクエストを準備します。

② サーバーにリクエストが送られる

ブラウザは、
指定されたURLのサーバーを探し、
「このページをください」とリクエストを送ります。

このやり取りは、
**HTTP（またはHTTPS）**というルールに従って行われます。

③ サーバー側で処理が行われる

サーバーは、受け取ったリクエストに応じて処理を行います。

・HTMLファイルがあれば、そのまま返す
・PHPファイルがあれば、PHPを実行して結果を作る
・必要に応じてデータベースにアクセスする

この段階で、
PHPの処理はすべて完了しています。

④ ブラウザが表示する

サーバーから返ってきたのは、
最終的に HTML・CSS・JavaScript です。

ブラウザはそれらを受け取り、
画面にページを描画します。

HTML・CSS・JavaScript・PHPの役割まとめ

ここで、それぞれの役割を整理します。

HTML
・ページの構造を定義する
・見出し、文章、フォームなど

CSS
・見た目を整える
・色、レイアウト、レスポンシブ対応

JavaScript
・画面に動きを付ける
・クリックや入力への反応

PHP
・サーバー側で処理を行う
・データの受け取り、保存、加工

この役割分担を理解しておくと、
「どこに書くべきコードか」が判断できるようになります。

静的サイトと動的サイトの違い

Webサイトには、大きく2種類あります。

静的サイト
・HTMLファイルをそのまま返す
・内容が固定されている

動的サイト
・PHPなどで処理を行い、内容を生成する
・入力やデータに応じて表示が変わる

WordPressやWebアプリは、
動的サイトに分類されます。

この仕組みを理解すると何が変わるか

Webサイト表示の仕組みを理解すると、次のような変化があります。

・エラーの原因を切り分けやすくなる
・HTML / CSS / PHP の役割を混同しなくなる
・「なぜ動かないのか」を考えられるようになる

これは、
初心者から一歩抜け出すための重要なポイントです。

よくある勘違い

初心者がよく勘違いしやすい点も押さえておきましょう。

・PHPのechoはブラウザで実行されている
→ 実際はサーバーで実行され、結果だけが送られている

・JavaScriptはサーバーで動いている
→ 基本的にはブラウザで実行される

この違いを意識するだけで、
学習の混乱が大きく減ります。

まとめ

Webサイトが表示されるまでには、
ブラウザとサーバーが役割分担しながら処理を行っています。

・ブラウザは表示と操作を担当
・サーバーは処理とデータ管理を担当
・PHPはサーバー側、JavaScriptはブラウザ側

この仕組みを理解することで、
これから学ぶHTML・CSS・JavaScript・PHPの位置づけが明確になります。

次は、
HTTPという通信ルールについて、もう少し詳しく見ていきましょう。

次に読むべき記事

▶ 次の記事：
1-2 HTTPとは何か｜リクエストとレスポンスの基本