← チャプター一覧
第6章 · ブラウザの仕組み
🌏 URLを入力してからページが見えるまで
ブラウザは世界で最も複雑なソフトウェアの一つ！HTMLを受け取ってから画面に表示するまでに何十もの工程がある。重要な4つを体験しよう！
レンダリングパイプライン — クリックすると説明が出るよ！
📄
HTML解析 → DOMツリー
HTMLタグを構造化されたツリーに変換
🎨
CSS解析 → スタイル計算
CSSを解析して各要素のスタイルを決定
📐
レイアウト（リフロー）
各要素の位置とサイズを計算する
🖌️
ペイント → コンポジット
ピクセルを実際に描画してレイヤー合成
第6章 · Step 1/4
📄 Step 1：HTML → DOMツリー
ブラウザはHTMLを上から読み、タグのネスト関係をDOM（Document Object Model）ツリーとして構築する。JavaScriptはこのツリーを操作する！
📝 入力HTML
<html>
  <head>
    <title>CS</title>
  </head>
  <body>
    <h1 id="t">Hello</h1>
    <p>World</p>
  </body>
</html>
→
🌳 DOMツリー（クリックで詳細！）
👆 ノードをクリックしてください
第6章 · Step 2/4
🎨 Step 2：CSSはどうやって要素に「当たる」のか
CSSルールはセレクタで対象を絞る。ブラウザは全ルールを当たって特異度（Specificity）と順番で優先度を決め、最終的なスタイルを計算する！
👆 ルールをクリックして「h1#t」への影響を確認！
* { color: black; } — 全要素 (特異度:0)
h1 { font-size: 32px; } — タグ名 (特異度:1)
#t { color: #2563eb; } — ID (特異度:100) ← 最強！
.hl { background: yellow; } — クラス (特異度:10)
h1#t に適用された最終スタイル：
第6章 · Step 3/4
📐 Step 3：レイアウト — 各要素の位置を計算する
スタイルが決まったら、ブラウザは各要素のボックスモデル（margin/border/padding/content）に従い、ページ全体の座標を計算する — これがレイアウト！
ボタンを押してレイアウト計算を見よう！
💡 CSSを変えると再レイアウト（リフロー）が起きる。
JSで要素の幅を1000回読み書きするとレイアウトスラッシングでページが重くなる！
第6章 · Step 4/4
⚡ Step 4：JavaScriptとDOMの動的操作
JavaScriptエンジン（V8など）がコードを実行し、DOMツリーを操作することでページを変える。変更があるとブラウザが自動的に再描画する！
ボタンをクリック → JSが実行 → DOMが変わる → 再描画！
Hello, World! 🌍
// JS実行ログ
💡 DOMの変更 → 再レイアウト → 再ペイントという流れ。
React/Vueなどは仮想DOMで変更を最小限にして高速化している！
第6章 · クイズ
📝 理解度チェック！
Q1. HTMLを構造化されたツリーに変換したものを何という？ 🤔
APIツリー
DOMツリー
CSSツリー
レンダーツリー
🎉

第6章クリア！

URLからピクセルまで、
ブラウザの全工程を学んだ！

📚 今日学んだこと

  • HTMLを解析してDOMツリーを構築
  • CSSは特異度で優先順位が決まる
  • レイアウトで各要素の座標とサイズを計算
  • ペイントでピクセルに描画される
  • JSがDOMを操作すると再レイアウト・再描画