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

漫画：一枚の画面に、四つの仕事 全4ページ

本の絵があるWebページを見て、イトは「この絵がそのまま来たのか」と考える。ピコと模型のサーバーの材料を確かめ、ブラウザの仕事を透明シートで試す。最後はイトが画面の周囲に四役の札を置き、自分でつながりを描く。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4画面の絵は、そのまま届く？

イトとピコがラボのノートパソコンを見る。白いWebページには青い本の絵があり、イトは画面と送られたものを同じだと考えかける。

1ページ目のセリフ

• イト「この絵が、そのまま来たの？」

2 / 4返ってくる材料を見よう

模型のサーバーのそばで、イトが材料の引き出しを開く。HTML、CSS、画像の札があり、ピコはそこへ視線を導く。

2ページ目のセリフ

• 模型の札「サーバー」
• 材料の札「HTML」「CSS」「画像」

3 / 4材料から画面を組み立てる

一枚の大きな図で、HTMLの構造、CSSの見た目、画像の三枚の透明シートをブラウザの台へ重ねる。イトの手は上のHTMLシートを合わせ、ピコがそばで見る。

3ページ目のセリフ

• 組み立てる台の札「ブラウザ」
• 透明シートの札「HTML」「CSS」「画像」

4 / 4四役で、自分の地図に

イトは画面の周囲へ、ブラウザ・通信・サーバー・材料の札を置き、一本のつながりを描く。見えていた絵の裏側を説明できるようになる。

4ページ目のセリフ

• 四役の札「ブラウザ」「通信」「サーバー」「材料」
• イト「画面の裏にも、仕事がある！」

横にスワイプして次のページへ。画像を押すと拡大できます。

引き出しや透明シートは役割を分ける模型で、実際のサーバーやブラウザの内部そのものではありません。材料をどこで作るかはサイトによって異なり、サーバーがHTMLを組み立てる場合もあります。JavaScriptやAPI、追加取得、キャッシュなどは簡略化し、すべてのサイトが同じ材料や順番で動くとは示していません。

本文の解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

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

第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サイト確認ミニワーク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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