Web技術を整える
中級ブラウザを整える。
＝ Chrome/Safari/Edge/Firefoxの違いと、URLからページが映るまでの流れ
アニメで見る — URLを入れてからページが映るまで 開くと1ステップずつ動きます
あなた
URL入力
ネットワーク
DNS・サーバー
ブラウザの中
レンダリング
STEP 1
※ イメージ図です。totonoe.tech は実際の通信は行わず、しくみの「読み方」に徹しています。
🔒 送信ゼロ。 このページは「読み方・しくみ」に徹した解説とアニメーションのみです。ブラウザ判定（User-Agentの送信）や実際の通信は一切行いません。図解・早見表の確認だけにお使いください。
代表的なブラウザ7種の開発元・レンダリングエンジン・JSエンジン・標準搭載OSをまとめました。バージョン番号やシェア率はすぐに古くなるため、あえて載せていません。
| 名前 | 開発元 | レンダリングエンジン | JSエンジン | 標準搭載OS | ひとこと特徴 |
|---|---|---|---|---|---|
| Chrome | Blink | V8 | Android 標準 | 最も広く使われているブラウザ。拡張機能の豊富さと開発者ツールの充実が特徴。 | |
| Safari | Apple | WebKit | JavaScriptCore | macOS / iOS 標準 | Apple製品に標準搭載。省電力性を重視したチューニングがされている。 |
| Edge | Microsoft | Blink | V8 | Windows 標準 | かつては独自エンジンだったが、現行版はChromeと同じBlink系に移行済み。 |
| Firefox | Mozilla | Gecko | SpiderMonkey | 独立系 | 主要ブラウザで唯一Blink/WebKit系列に属さない独立エンジン。プライバシー機能に力を入れる。 |
| Brave | Brave Software | Blink | V8 | 独立系 | 広告・トラッカーのブロック機能を標準で内蔵したChromium派生ブラウザ。 |
| Vivaldi | Vivaldi | Blink | V8 | 独立系 | タブの並べ方や配色まで細かく調整できる、カスタマイズ性の高さが売り。 |
| Opera | Opera | Blink | V8 | 独立系 | 古くからある老舗ブラウザ。VPN機能やサイドバーの独自機能を搭載。 |
※ バージョン番号・利用率（シェア）は日々変わるため掲載していません。「最も広く使われている」等の相対的な表現にとどめています。
見た目は7種類、中身は実質3系統
レンダリングエンジンで見ると、ブラウザは3つに分かれる
開発の中心：Google（Chromium プロジェクト）
Chromium という共通の土台から派生した「Chromium家系」。表示エンジンが同じなので、Chromeで正しく表示できればEdgeやBraveでもほぼ同じに表示される。
開発の中心：Apple
Safari専用のエンジン。加えてiPhone/iPad上では、Chrome・Firefoxなど他ブラウザを名乗るアプリも中身はこのWebKitで動く（Appleの制約による）。
開発の中心：Mozilla
主要エンジンの中で唯一、Chromium系列にもWebKit系列にも属さない独立したエンジン。
① エンジンが同じなら、表示崩れもほぼ同じ
Chrome・Edge・Brave・Vivaldi・Operaは全部Blinkという同じエンジンで描画しているので、「Chromeで直ればEdgeでも直る」がほぼ成り立ちます。表示確認の手間を減らせる理由はここにあります。
② iPhone/iPadでは全ブラウザが実質Safari
iOS上ではAppleの制約により、Chrome・Firefoxなど他ブラウザを名乗るアプリも中身のレンダリングエンジンはWebKit（Safariと同じ）で動きます。「iPhoneのChromeで確認したから安心」は、実はWebKitで確認したのと同じことです。
中身の分解
ブラウザの中には「5つの係」がいる
レンダリングエンジン
描く係
HTMLとCSSを読み取り、画面のどこに何をどう描くかを決めて実際に描画する。Blink・WebKit・Geckoなど。
JSエンジン
動かす係
JavaScriptを読み取って実行し、ページに動き（クリックへの反応・書き換えなど）を与える。V8・JavaScriptCore・SpiderMonkeyなど。
ネットワーク
取ってくる係
DNSで名前を解決し、TCP/TLSで接続し、サーバーへHTTPリクエストを送ってHTML・CSS・画像などを受け取る。
ストレージ
おぼえる係
Cookie・キャッシュ・localStorageなどで、サイトの状態やログイン情報、再訪問時の表示を高速化するデータを端末に保存する。
セキュリティ
守る係
サンドボックス（タブごとの隔離）でサイト同士の干渉を防ぎ、証明書を確認して通信先が本物かを検証する。
レンダリングエンジンとJSエンジンだけが語られがちですが、名前解決・接続を担うネットワーク、Cookieやキャッシュを扱うストレージ、サイト同士を隔離するセキュリティも、ブラウザという1つのソフトの中で協調して動いています。
よくある誤解・4つ
シークレットモードは「匿名」ではない
- 1
シークレットモード（プライベートブラウジング）＝匿名ではない
シークレットモードが約束しているのは「閲覧履歴・Cookie・入力内容を、この端末に残さない」ことだけです。アクセスしたサイト側や、勤務先・学校・プロバイダのネットワーク管理者からは、通信先も含めて普段どおり見えています。匿名化や暗号化とは別の機能です。
- 2
「ブラウザ」と「検索エンジン」は別物
Chromeはブラウザ（Webページを表示するソフト）、Googleは検索エンジン（Web上の情報を探す仕組み）です。「Chromeで検索する」は「ブラウザの中で検索エンジンを使う」ことで、両者は別レイヤーにあります。ブラウザを変えても検索エンジンは選べますし、逆も同様です。
- 3
EdgeとChromeで表示がほぼ同じなのは「エンジンが同じ」だから
見た目や機能は違っても、EdgeとChromeは同じBlinkエンジンでページを描画しています。あるサイトがChromeで正しく表示できれば、Edgeでもほぼ同じに表示される理由はここにあります（③の図解を参照）。
- 4
「キャッシュをクリアしたら直った」は、古いファイルを新しく取り直したから
ブラウザは表示を速くするため、一度取得したHTML・CSS・画像などをキャッシュ（④の「おぼえる係」）に保存し、次回は再利用します。サイト更新後にキャッシュだけ古いままだと表示が崩れることがあり、「クリアで直る」のはこの古いファイルを破棄して新しく取り直すため。配信側でキャッシュの効き方を調整する話はCDNを整えるで扱っています。
🔒 このページは静的な早見表と図解だけで、ブラウザ判定や外部への通信は一切行いません（送信ゼロ）。名前解決の詳しいしくみはDNSを整える、鍵マークのしくみはHTTPSのしくみを整える、リクエストの中身はHTTPを整えるもどうぞ。
このツールについて
Chrome・Safari・Edge・Firefoxは何がどう違うのか。中身のレンダリングエンジン・JSエンジンを早見表で比べ、URLを入れてからページが画面に映るまでの流れを図で追えます。見た目は7種類でも、中身は実質3系統しかないことも分かります。すべて解説のみ・送信ゼロです。
Chrome・Safari・Edge・Firefoxの開発元・エンジンを早見表で比較。見た目は7種類でも、中身はBlink/WebKit/Geckoの3系統だけ。URLを入れてからページが映るまでの流れもアニメで追えます。
🔰 かんたんに言うと
ChromeやSafariなど「見た目は違う7つ」が、実は中身のエンジンでは3つのグループに分かれる、というしくみを整理します。
主な機能
- URL入力→DNS→TCP/TLS→HTML受信→DOM/CSSOM→レンダーツリー→描画→JS実行を図解アニメで再生
- 主要ブラウザ7種の開発元・レンダリングエンジン・JSエンジン・標準搭載OSの早見表
- 「見た目は7種類、中身は3系統」のエンジン系統図解
- ブラウザの中の5つの係（描く/動かす/取ってくる/おぼえる/守る）を分解
- シークレットモード＝匿名ではない等よくある誤解の解説
- 送信ゼロ・ブラウザ判定なし・解説のみ
よくある質問
Q. ブラウザは何種類ありますか？中身も全部違うのですか？
A. 早見表に挙げているのは Chrome・Safari・Edge・Firefox・Brave・Vivaldi・Opera の7種類です。見た目は7種類でも、レンダリングエンジンは Blink・WebKit・Gecko の3系統しかありません（Chrome・Edge・Brave・Vivaldi はいずれも Blink 系）。
Q. URL を入力してからページが表示されるまで、何が起きていますか？
A. DNS → TCP/TLS 接続 → HTML 受信 → DOM/CSSOM 構築 → レンダーツリー生成 → 描画 → JS 実行という流れを、アニメーションつきの図解で確認できます。
Q. シークレットモードは匿名で閲覧できるということですか？
A. 違います。シークレットモードは主に閲覧履歴や Cookie を端末に残さない機能で、接続先の Web サイトやネットワーク管理者からは通常どおり閲覧が見えます。このページは解説のみで、送信ゼロです。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
