Webページのしくみ届くのは画面ではなく、
画面をつくる材料。

URLは、行き先だけでなく要求の手掛かり

URLには、通信方式、ホスト名、パスなどが含まれます。たとえば https://example.com/guide なら、HTTPSで example.com へ接続し、/guide を要求する、と役割を分けて読めます。

ブラウザはまずURLを解釈します。名前に対応する接続先の情報が必要ならDNSを利用します。**名前の解決と、その後のページの要求は別の処理です。**DNSサーバーがページの本文を渡しているわけではありません。

ブラウザとサーバーは、要求と応答をやり取りする

ブラウザはクライアント、要求に応じてデータを返す側はサーバーです。HTTPはそのやり取りのルールです。要求には欲しい資源や操作など、応答には状態やデータなどが含まれます。

HTTPSでは通信の保護も行います。通信方式によって接続確立の細部は変わるため、「すべてのWeb通信は必ず同じTCPの手順を通る」と固定しないことが大切です。ここでは細かなHTTPの版の違いより、名前を調べる、相手とつながる、要求して受け取るという役割を見ています。

受け取るのは「画面」ではなく材料

サーバーからは、主にHTMLなどのデータが返ります。HTMLには見出し、段落、リンク、画像への参照などが含まれます。CSSは文字の大きさ、色、余白、配置などを指定します。JavaScriptが操作や動的な更新を担う場合もあります。

**ブラウザは、受け取った材料を基に画面を作ります。**画像を使うページでも、ページ全体を一枚の写真として受け取っているわけではありません。端末の幅に応じて文章が折り返されたり、要素の並びが変わったりするのは、この組み立てをブラウザが行うためです。

↔ 表が収まらない場合は、横にスクロールして比較できます。

同じ文書を、見比べる

材料を変えると、画面はどう変わる？

文書の内容を保ったまま、見た目の指定と画像の役割を比べる小さな実験です。

表示の実験

観察ノート

一枚の画面を、材料から。

この見出しと段落が文書の内容です。CSSで色や余白、配置を指定すると、同じ文章でも見え方が変わります。

画面の組み立てへ進む →

画像も一つの資源として使い、文書とスタイルに合わせて配置しています。

役割の比較のための例です。実際には資源の取得と解析が重なることもあり、この順番で一つずつ処理するとは限りません。JavaScriptはこの例の切り替え操作を担当しています。

拡大して見る ↗

1. HTML：文書の構造と内容。
2. CSS：色・文字・余白・配置の指定。
3. JavaScript：操作や更新。使わないページもある。

画面の組み立てにも順序がある

ブラウザはHTMLを読み、文書の構造を作ります。スタイル情報も読み、表示する要素の関係を整理します。レイアウトでは各要素の大きさと位置を計算し、描画では画面に色や線、文字などを塗ります。

この処理は、すべてのファイルを受け取るまで何もできないという単純な一列の動作ではありません。**取得と解析が重なったり、後から届いた情報で描画が更新されたりします。**最初に文字が出て、次に画像が出ることがあるのは、その一例です。

キャッシュがあれば、前の材料を使える

ブラウザ等は受け取った資源を一定の条件で保存し、再利用できます。これがキャッシュです。DNSにもキャッシュがあり、前に調べた答えを期限内で利用できます。接続を再利用する場合もあります。

そのため「URLを入力するたびに、必ずDNSから全部同じ手順を行う」という図は、初回の基本モデルとしては使えても、毎回の実際の通信を示すとは限りません。キャッシュの期限や変更確認によって、取り直すものも変わります。

拡大して見る ↗

1. DNS：期限内の答えを利用できる場合がある。
2. 資源：再利用の条件を満たす保存データを使える。
3. 接続：再利用できれば新規の接続準備を省ける。

遅いときは、どの役割で待っている？

表示が遅れる理由は一つではありません。名前の解決、回線、サーバーの処理、資源の量、端末側の計算などで待ち時間が生じます。Wi-Fiの電波が強いことだけで、すべての処理が速いとは判断できません。

全体図から役割を分けると、DNS、ルーター、HTTPSの説明もつながります。各しくみは同じ仕事を重ねているのではなく、一つのページが届くための異なる担当です。