サーバから返ってくるのは、じつは画面そのものではなく、画面の設計図（HTML・CSS・JS）。それを受け取って、実際の画面に組み立てて見せてくれるのがブラウザです。
初級の解説は準備中のため、初級の内容を表示しています。
概要 — まず全体をつかむ
詳細 — 1段階ずつ追う
これは何をする係？
設計図を受け取って建物を建てる大工さんを思い浮かべてください。ブラウザは、送られてきた設計図（※1〜3）を解釈し、あなたの見る画面に組み立てます。
- ※1 HTML — 骨組み（見出し・段落・画像などの構造）
- ※2 CSS — 見た目（色・大きさ・配置の装飾）
- ※3 JS — 動き（ボタンの反応・入力チェックなどの振る舞い）
仕事の流れ
- アドレスバーにURLを入れる（宛先を伝える）
- サーバから HTML を受け取る
- CSS で装飾を当て、見た目を整える
- JS を動かして、操作できるようにする
- 出来上がった画面を描画（※4 レンダリング）して、あなたに見せる
登場人物メモ:
- ※4 レンダリング — 設計図を、実際のピクセル（見える画面）に変換すること
ブラウザにできること
- タブ・履歴・ブックマーク — ページを切り替え、たどる
- Cookie（※5） — ログイン状態などを覚えておく小さなメモ
- 検索 — ブラウザ自身が探すのではなく、検索エンジンにお願いして結果を表示しているだけ
登場人物メモ:
- ※5 Cookie — サイトごとに保存される小さなデータ。「ログイン中」を覚えるのに使う
⚠️ うまくいかないとき
- 真っ白 — JSのエラーで組み立てが止まった
- レイアウトが崩れる — CSSやJSが読み込めていない
- 古い表示のまま — 前に受け取ったもの（キャッシュ）が残っている
- 重い・カクつく — JSの処理が多すぎる
理解度チェック
そのまま解けます（成績は保存されません）。無料アカウントを作ると、学習の記録と進捗の山登りが始まります。
問1. ブラウザが受け取った「HTML・CSS・JS」の役割の組み合わせで正しいのは？
問2. アドレスバーに言葉を入れて検索したとき、実際に「探している」のは？
問3. 設計図（HTML・CSS・JS）を、実際に見えるピクセルの画面に変換することを何と呼ぶ？
問4. 「ログイン中」などを覚えておくために、サイトごとに保存される小さなデータは？
問5. ページが「古い表示のまま」更新されないとき、主な原因として近いのはどれ？
問6. 画面が「真っ白」になってしまうとき、主な原因として近いのはどれ？
問7. 画面の「骨組み（構造）」を作る言語を、英字4文字で何と呼ぶ？
問8. 画面の「見た目（色や配置の装飾）」を整える言語を、英字3文字で何と呼ぶ？