こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
Webブラウザって、普段私たちが何気なく開いている画面の裏側で、実はものすごい量の仕事を猛スピードでこなしている職人の集団みたいなやつなんですよね。中でも「CSS（デザインの指定）」をどうやって画面の見た目に翻訳しているのか、その裏側の主役が今回お話しする「CSSOMツリーの構築プロセス」です。
なんだか「CSSOM（シーエスエスオーエム）」なんて名前を聞くだけで、頭から煙が出そうになるかもしれませんが、大丈夫ですよ。一つひとつ、身近な例えを交えながら優しくほどいていきますので、コーヒーでも飲みながらリラックスして読んでいってくださいね。
—
1. そもそも「CSSOM」ってなに？ 身近な例えで考えてみよう
Webブラウザがインターネットの海からHTML（骨組み）とCSS（お化粧）を拾ってきたとき、そのままの文字列（ただの文字の羅列）では「ふーん、きれいな文章だね」としか理解できません。ブラウザはこれを「よし、画面を描くぞ！」と料理できるように、頭の中で整理整頓する必要があります。
ここで登場するのが CSSOM（CSS Object Model：CSSオブジェクトモデル） です。
これ、何かに似ていませんか？そう、会社の「組織図」や、お母さんが作る「家族の衣替えの指示書」みたいなものです。
例えば、家の中にたくさんの家族（HTMLの要素）がいますよね。
- 「お父さんは、会社に行くからスーツを着てね（全般的なスタイル）」
- 「長男は、サッカー部だからユニフォームを着てね（特定のクラス指定）」
- 「でも、長男が『今日は寒いから』って上にパーカーを重ね着したら、ユニフォームの上からパーカーを着る（スタイルの上書き・詳細度）」
CSSOMは、この「誰が、どんなルールで、どう着飾るべきか」を、親から子へと受け継ぐ家系図のようなツリー構造として整理したものです。ブラウザは、この指示書が完成して初めて、「じゃあ、長男のパーカーの色は青にしよう！」と正確に画面を塗り分けることができるんです。
—
2. CSSOMが作られるまでの裏側（構築プロセス）
ブラウザがCSSのファイル（または`
こんにちは、CSSOMの世界へようこそ！
この段落の文字色は、bodyで指定した「#333333（濃いグレー）」がそのまま引き継がれます。
でも、この段落には「.highlight」という特別なルールが適用されているので、文字がピンク色で太字になります！