1. URL を入れる
アドレス欄に https://example.jp/news/ と入れて Enter を押したところから始まります（リンクを押したときも同じです）。
URL は 3 つの部分に分かれています。
https://（方式）：どのやり方でやりとりするか。httpsは、あとで「鍵をかけて」やりとりする方式ですexample.jp（ドメイン）：どのサイトか。サイトの「名前」にあたります/news/（パス）：そのサイトの、どのページか
ブラウザはこの名前を手がかりに、相手を探しに行きます。
2. 住所を調べる（DNS）
example.jp は人が覚えやすい名前で、コンピューターがつながるには IP アドレスという番号（例：203.0.113.10）が要ります。名前を番号に置きかえる仕組みが DNS です。電話帳で名前から番号を引くのに似ています。
- ブラウザやパソコンは、最近調べた答えを少しのあいだ覚えています。覚えていればそれを使います
- 覚えていなければ、DNS のサーバー（多くは契約しているプロバイダーのもの）に問い合わせます
- そのサーバーは、DNS の階層を上からたどって（全体の入口 →
.jpの管理 →example.jpの担当）答えを見つけ、ブラウザに返します
答えには「何秒まで覚えていてよいか」の期限が付いていて、そのあいだは問い合わせを省けます。DNS の設定を変えてもすぐ全員に反映されないのは、この覚えている期間があるためです。DNS のサーバーを順にたどる流れは「DNS とは」で詳しく説明しています。
3. つながる
IP アドレスが分かったら、その相手と通り道をつなぎます。いきなりページを送り合うのではなく、最初に「つなぎますよ」「どうぞ」という短いやりとりをして、届いたかを確かめながら送れる状態にします。
サイトが CDN（後の 5 で説明します）を使っている場合、DNS が返すのは CDN の番地です。ブラウザがつながる相手は、サイトのサーバーではなく、利用者の近くにある CDN のサーバーになります。
4. 鍵をかける（HTTPS）
https のサイトでは、ページをリクエストする前に通り道に鍵をかけます。この仕組みを TLS といい、TLS で守られた HTTP が HTTPS です。
- 相手が 証明書を見せます。証明書は「このサーバーは確かに
example.jpです」と、信頼された発行元が保証したものです - ブラウザは、名前が合っているか・期限内か・信頼できる発行元かを確かめます
- 確かめられたら、その場かぎりの鍵を取り決めて、以後のやりとりを暗号にします
鍵をかけたあとは、途中の通り道（公衆 Wi-Fi など）で覗かれても、中身は読めません。ただし、HTTPS が守るのは「通り道」です。行き先のサイトが安全かどうかまでは保証しません。証明書の確かめ方や鍵の決め方は「HTTPS とは」で詳しく説明しています。
補足
新しい HTTP/3 という方式では、3 の「つながる」と 4 の「鍵をかける」を、1 回のやりとりにまとめて行います（QUIC という仕組み）。順番を分けずに済むぶん、最初の表示が少し速くなります。
5. ページをリクエストする
通り道ができたら、ブラウザは HTTP という決まった書き方で「/news/ のページをください」という リクエスト を送ります。
サイトが CDN を使っていれば、リクエストはまず CDN が受け取ります。CDN は、世界のあちこちに置いたサーバーでサイトの 作り置き（キャッシュ） を持っておき、近くの利用者にすぐ渡す仕組みです。
- 作り置きがある：CDN がその場で返します。遠くのサーバーまで行かないので速く、サーバーの負担も減ります
- 作り置きがない（期限切れも含む）：CDN が、サイトの本来のサーバーにリクエストを取り次ぎます（次の 6 へ）
図の下のボタンで、2 つの場合を切りかえて見られます。
6. ページを組み立てる
作り置きがなければ、リクエストはサイトの Web サーバーに届きます。WordPress のサイトでは、ここでページを毎回組み立てます。
- Web サーバーがリクエストを受け取り、WordPress（PHP というプログラム）を動かします
- WordPress は、URL から「どの記事か」を調べ、データベースから記事の本文・題名・日付などを取り出します
- テーマの決まった型（テンプレート）に当てはめて、1 枚の HTML を組み立てます
- できた HTML を返します。途中に CDN があれば、CDN は渡しながら作り置きもしておきます
組み立ては毎回の手間がかかるので、WordPress でもキャッシュのプラグインやサーバーの機能で、組み立てた結果を作り置きしておくことがよくあります。WordPress の中の流れは「WordPress とは」で詳しく説明しています。
7. 画面に描く
HTML が届くと、ブラウザは上から読みながら画面を描く準備をします。
- HTML を読み、ページの骨組みを作ります
- 途中で見つけた CSS（見た目の指定）・画像・JavaScript（動き）を、それぞれまた取りに行きます。これらにも 3〜6 の流れがあり、多くは CDN の作り置きから返ります
- CSS がそろうと、文字や枠の位置を計算して、最初の画面を描きます
- 画像が届いたところから順に埋まり、JavaScript が動いてボタンなどが使えるようになります
ページの一番大きな部分（大きな画像や見出し）が描かれるまでの時間は LCP と呼ばれ、Google が表示の速さを測る指標の 1 つになっています。
表示されないとき、どこを疑うか
| 画面に出ること | 疑う段階 | よくある原因 |
|---|---|---|
| サーバーの IP アドレスが見つかりませんでした | 2. DNS | ドメインの契約切れ、DNS の設定の誤り |
| 接続がタイムアウトしました | 3. つながる | サーバーの停止・混雑 |
| この接続ではプライバシーが保護されません | 4. HTTPS | 証明書の期限切れ・設定の誤り |
| 直したのに古いページのまま | 5. ページをリクエストする | CDN・キャッシュの作り置き |
| 500 エラー、真っ白な画面 | 6. 組み立てる | PHP のエラー、テーマ・プラグインの不具合、PHP の版の不一致 |
| データベース接続確立エラー | 6. 組み立てる | データベースの停止、設定の誤り |
| レイアウトが崩れる、画像が出ない | 7. 画面に描く | CSS・画像の読み込みの失敗 |
出典
- Web のしくみ（MDN）
- RFC 1034: Domain Names - Concepts and Facilities
- RFC 8446: The Transport Layer Security (TLS) Protocol Version 1.3
- RFC 9000: QUIC: A UDP-Based Multiplexed and Secure Transport
- RFC 9110: HTTP Semantics
- RFC 9111: HTTP Caching
- HTTP キャッシュ（MDN）
- Template Hierarchy（WordPress Developer Resources）
- ブラウザーの動作のしくみ（MDN）
- Understand the critical path（web.dev）
- Largest Contentful Paint (LCP)（web.dev）
この図解は、出典に挙げた仕様や公式の文書をもとに Claude（AI）が下書きし、セオリコが内容を確かめて公開しています。図は説明のために流れを簡単にしたもので、実際のやりとりはサイトや環境によって異なります。