Webサイトの仕組み｜URLから表示までの全体像

Webサイト確認ミニワーク

自分がよく見るサイトを一つ選び、次を考えてみましょう。

• URLのドメイン名:
• 画面に出る主な材料:
• 利用者が操作する場所:

この三つを分けると、Webサイトがただの画面ではなく、通信と表示の組み合わせだと見えてきます。

好きなページの名前を中央に書き、四役を周囲に置いて線で結んでください。全員の仕事を一つずつ言えたら、画面の裏側を自分の地図にできています。

画面と材料を分けて見よう

第38話「Webとインターネットは同じ？」の道路とお店の模型を入口に、見えている画面と裏側の役割を分けていきます。

Webサイトの仕組みを調べるときは、「画面に見えているページ」と「裏側で取りに行っている材料」を分けると迷いにくくなります。表示が遅い、画像だけ出ない、ログイン後の画面だけ変わる、といった症状も、この分け方で見ると確認場所が整理できます。

Webサイトを一言でいうと

Webサイトは、サーバーに置かれたデータをブラウザが取得し、複数のページとして見られるようにしたものです。

実際には、HTML、CSS、画像、JavaScript、APIの結果などが組み合わさります。サイトによっては、サーバー側でページを作って返す場合もあれば、ブラウザ側でデータを組み立てる場合もあります。

イト

Webサイトって、1枚の画面じゃなくていくつものページの集まりなの？

ピコ

うん。ブラウザがサーバーから材料を受け取り、ページとして組み立てて見せているんだ。

サイトが表示される流れ

Webサイトを見る流れは、ざっくり次のようになります。

1. ブラウザにURLを入力する
2. DNSがドメイン名から宛先を探す
3. ブラウザがサーバーへリクエストを送る
4. サーバーがHTMLなどをレスポンスで返す
5. ブラウザがCSSや画像なども取りに行く
6. 受け取った材料を画面に組み立てる

この流れは インターネットの仕組み や URLとは とつながります。

HTML・CSS・JavaScriptの役割

Webサイトの材料は、役割で見ると分かりやすくなります。

• HTML: 見出し、文章、リンクなどの構造
• CSS: 色、余白、配置、文字サイズなどの見た目
• JavaScript: ボタン操作や画面の動き
• 画像や動画: 視覚的な内容
• APIのデータ: 最新情報やユーザーごとの情報

たとえでは、HTMLが骨組み、CSSが服、JavaScriptが動きです。実際にはブラウザがそれらを解釈し、画面に表示します。

サーバーとブラウザの分担

Webサイトでは、サーバーとブラウザが役割を分担します。サーバーはデータを返し、ブラウザは受け取ったデータを表示します。ただし、どこまでをサーバー側で作るか、どこからをブラウザ側で作るかはサイトによって違います。

たとえばニュースサイトでは、サーバーが完成に近いHTMLを返す場合があります。アプリのようなサイトでは、ブラウザがAPIからデータを受け取りながら画面を変える場合もあります。

そのため、Webサイトを確認するときは、サーバーが返した内容、ブラウザが追加で取りに行った材料、利用者の操作であとから変わる部分を分けて見ます。同じ「サイトを見る」でも、静的なページ、会員ページ、検索結果、地図やSNSのような画面では、サーバーとブラウザの分担が少しずつ違います。

Webサイトの仕組みの確認クイズ

Q1. Webサイトはブラウザだけで成り立ちますか？

いいえ。サーバー、通信、ブラウザ、ページの材料が関わります。

Q2. HTMLとCSSは同じ役割ですか？

同じではありません。HTMLは構造、CSSは見た目を主に扱います。

Q3. 表示の流れをもっと細かく見るなら？

Webページ表示の仕組み へ進んでください。

画面のむこう側から戻って｜Webサイト

Webサイトを追ってピコルート・ラボの大きな地図机から帰ってくると、ホワイトボードには短い答え、見えるたとえ、実際の確認場所の三つだけが残りました。ピコとイトは、それなら次に誰かへ説明できそうだと顔を見合わせます。

ノートに残すなら、Webサイトは次の順で十分です。

• Webサイトの定義を先に書く
• ピコルート・ラボの大きな地図机のたとえでWebサイトの流れを見る
• ブラウザ、通信、サーバー、ページ材料の四役に分ける

いま開いているページを例に、「ブラウザが場所を指定し、サーバーから材料を受け取り、画面を組み立てる」と声に出してみてください。場所の名前から宛先を探す部分を確かめるなら、DNSとは が次の一歩です。