ブラウザでURLを開いてから画面が表示されるまで

入門 | 11分 で読める | 2026.06.16

公式ドキュメント
仕組み解説ネットワークHTTP初心者

ブラウザでURLを開くとは、文字列としてのURLを読み取り、宛先を調べ、サーバーへHTTPリクエストを送り、返ってきたHTMLやCSSやJavaScriptを画面に描画する一連の処理です。

一言でいうと

URLを開く処理は、DNSで宛先を探し、TCP/TLSで接続し、HTTPでデータを受け取り、ブラウザが画面に描画する流れです。

登場人物

登場人物役割
ブラウザURLを解釈し、通信して画面を描画する
DNSドメイン名をIPアドレスに変換する
サーバーリクエストを受け取り、レスポンスを返す
TLS証明書HTTPS通信で相手の正当性を確認する
HTML / CSS / JavaScript画面の構造、見た目、動きを作る

全体の流れ

URL入力
  -> DNSでIPアドレスを調べる
  -> TCP接続を作る
  -> HTTPSならTLSハンドシェイクを行う
  -> HTTPリクエストを送る
  -> サーバーがレスポンスを返す
  -> ブラウザがHTMLを読み込む
  -> CSS / JavaScript / 画像を追加で取得する
  -> 画面に描画する

Step 1: URLを分解する

たとえば次のURLを考えます。

https://example.com/articles/1?tab=comments
部分例意味
スキームhttps通信方式
ホスト名example.com接続先の名前
パス/articles/1サーバー内の対象
クエリtab=comments追加条件

ブラウザは最初にURLを解釈し、どの方式で、どのホストへ、どのパスを要求するかを決めます。

Step 2: DNSでIPアドレスを調べる

ブラウザは example.com という名前だけでは通信できません。実際の通信にはIPアドレスが必要です。

nslookup example.com

DNSは、ドメイン名をIPアドレスへ変換します。キャッシュが効いている場合は、毎回外部のDNSサーバーへ問い合わせるとは限りません。

Step 3: TCPとTLSで接続を準備する

Web通信では、多くの場合TCP接続を作ります。HTTPSでは、その上でTLSハンドシェイクを行い、暗号化通信の準備をします。

処理目的
TCP接続データを順序通りに届ける通信路を作る
TLSハンドシェイク通信相手の確認と暗号化の準備をする

HTTPSのURLでは、HTTPの内容を送る前にTLSで安全な通信路を作ります。

Step 4: HTTPリクエストを送る

接続できると、ブラウザはHTTPリクエストを送ります。

GET /articles/1?tab=comments HTTP/1.1
Host: example.com
Accept: text/html

サーバーはこのリクエストを見て、HTMLやJSONなどを返します。

Step 5: ブラウザが画面を作る

ブラウザは最初のHTMLを受け取ると、その中に書かれたCSS、JavaScript、画像などを追加で取得します。

<link rel="stylesheet" href="/style.css">
<script src="/app.js"></script>
<img src="/logo.png" alt="logo">

そのため、1つのページ表示でも、実際には複数のHTTPリクエストが発生します。

DevToolsで確認する場所

見たいものDevToolsの場所
HTMLが返っているかNetwork
CSSやJSが読み込まれたかNetwork
JavaScriptエラーConsole
CookieやlocalStorageApplication
ステータスコードNetwork

よくある誤解

誤解実際
URLを開くと1回だけ通信するHTML、CSS、JS、画像などで複数回通信します
DNSが成功すればページは表示されるTCP、TLS、HTTP、サーバー処理も成功する必要があります
404はネットワークが壊れているサーバーには届いているが、対象リソースがない状態です

まとめ

URLを開いて画面が表示されるまでには、URL解析、DNS、TCP、TLS、HTTP、サーバー処理、ブラウザ描画が関係します。画面が表示されない時は、どの段階で止まっているのかを分けて考えることが重要です。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR