こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。

Webサイトを作っていて、「なぜこのCSSが効かないんだろう？」「JavaScriptで要素を追加したのに、すぐ画面に反映されない気がする…」と頭を悩ませた経験はありませんか？

大丈夫ですよ、最初はみんなそこでつまずきます。ブラウザの裏側なんて、普段はブラックボックスですものね。でも、ご安心ください。今日は、ブラウザが私たちが書いたコードを受け取って、画面にピクセルを描き出すまでのドラマチックな冒険――その中でも最も重要な「レンダーツリー構築プロセス」について、一緒に優しく紐解いていきましょう。

難しい専門用語はなるべく身近な例えに置き換えていくので、コーヒーでも飲みながらリラックスして読んでいってくださいね。

—

1. 画面が表示されるまでの「下準備」を覗いてみよう

私たちが普段何気なく見ているWebページ。ブラウザは、HTMLファイルという「文字の束」をサーバーから受け取ると、魔法のように綺麗な画面を組み立ててくれます。

しかし、ブラウザも魔法を使っているわけではありません。実は、裏でめちゃくちゃ地道な下準備を行っています。その流れをざっくりおさらいしてみましょう。

1. HTMLを読む（HTMLパース）：文字の羅列から「これは見出し、こっちはボタン」とパーツを仕分けして、DOMツリーという構造を作ります。
2. CSSを読む（CSSOMパース）：「見出しは赤色、ボタンは角丸」といったデザインのルールを整理して、CSSOMツリーという設計図を作ります。
3. ふたつを合体させる（レンダーツリー構築）：ここが今回の主役！DOMとCSSOMを組み合わせて、「実際に画面に映すものだけ」をまとめた「レンダーツリー」を作ります。

この「ふたつを合体させる」というプロセスこそが、ブラウザの隠れた職人芸なんです。一体どうやっているのか、次で詳しく見てみましょう。

—

2. レンダーツリーってなに？ お手紙作りに例えてみよう

「DOMツリー」と「CSSOMツリー」と言われても、なんだか堅苦しいですよね。

ここで、「結婚式の招待状作り」に例えてみましょう。

• DOMツリー（登場人物リスト）：

新郎、新婦、親族、友人、そして「余興で使う変装グッズ」や「司会者の原稿」といった、会場にあるすべての要素がリストアップされた名簿です。

• CSSOMツリー（ドレスコードと装飾のルール）：

「親族は黒のフォーマル」「友人は平服」「変装グッズは…あ、これ隠しといて！」といった、見た目やルールの指定書です。

さて、結婚式の当日に全員がそのまま会場に入ってきたらどうなるでしょう？「変装グッズ」が勝手に席に座っていたら困りますよね（笑）。

そこで必要になるのが、「実際にパーティー会場（画面）に参加して、目に見える人たちだけの最終名簿」を作る作業です。これがまさにレンダーツリーです！

レンダーツリーの厳しい（でも優しい）ルール

ブラウザは、DOMツリーとCSSOMツリーを上から順に突き合わせながら、レンダーツリーを作っていきます。その際、次のような選別を行います。

• 画面に映るものは採用！（通常のテキストや画像、div要素など）
• 画面に映らないものはバッサリ除外！
• 例：``タグの中身（ページの裏側の設定なので、画面には見えません）
• 例：`display: none;` が指定された要素（「この人は今日は欠席ね」と完全に透明人間扱いにされます）

逆に、CSSの `visibility: hidden;` が指定されている要素は、「姿は見えないけれど、席のスペース（空間）だけは空けておいてね」という扱いになるため、レンダーツリーには残ります。この違い、実務でもよく聞かれるポイントなので、ぜひ覚えておいてくださいね！

—

3. 実践！コードで見るDOMとCSSの出会い

百聞は一見に如かず。実際に簡単なコードを書いて、ブラウザがどうやってレンダーツリーを作っているのかイメージしてみましょう。

以下のコードを、そのままお使いのエディタ（VS Codeなど）に貼り付けて `index.html` として保存し、ブラウザで開いてみてください。

ブラウザの頭の中を覗いてみると…

ブラウザがこのコードを読み込んだとき、裏側では次のようなドラマが起きています。

1. DOMツリーの完成：`html` の中に `head` や `body` があり、その中に `div` や `p` タグたちが木の枝のように階層構造でぶら下がります。
2. CSSOMツリーの完成：`