レンダリングとは｜ブラウザが材料を画面に描く処理

漫画：同じページ、ちがう並び 全4ページ

イトは同じページの模型を広い枠と狭い枠で見比べ、並びが違うことに気づく。マコトと構造と見た目の手がかりを確かめ、狭い枠へどう置くかを試す。最後にイトは縦の配置を選び、見える形に描く仕事までつなげる。

先に本文の解説を読む ↓

画像を押すと拡大できます。＋／−で大きさを変え、拡大中はドラッグして読めます。

1 / 4同じ材料なのに並びが違う

イトとマコトが広い枠と狭い枠を持ち、同じ青い丸と橙の四角が横/縦に並ぶ模型を比べる。マコトの問いを受けてイトが違いを観察する。

1ページ目のセリフ

• マコト「同じページなのに、並びが違う？」

2 / 4構造と見た目の手がかり

上のコマでHTMLの灰色の構造とDOMの木、下のコマでCSSとCSSOMの色・間隔の規則の模式図を確かめる。

2ページ目のセリフ

• 図「HTML」→「DOM」
• 図「CSS」→「CSSOM」

3 / 4幅に合わせて配置を決める

狭い枠と広い枠の図に、丸と四角の大きさや位置の線を引く。イトは狭い枠で縦に並ぶ配置を選ぶ。

3ページ目のセリフ

• 図の役割「レイアウト」

4 / 4決めた配置を画面に描く

イトが選んだ狭い枠の配置に、青い丸と橙の四角が描かれる。位置を決める仕事と見える形を描く仕事をつなげる。

4ページ目のセリフ

• マコト「描画」
• イト「並べてから、画面に描くんだ！」

横にスワイプして次のページへ。画像を押すと拡大できます。

枠と図形はレンダリングの役割を分ける模型です。画面幅で並びが変わるのは、この例のCSSのルールによるもので、すべてのページが自動で同じように変わるわけではありません。実際には取得・解析・描画が重なることがあり、更新の内容によって必要な作業も異なります。毎回すべての工程を一からやり直すとは示していません。

本文の解説へ ↓

閉じる ×

← 前

−

100%

＋元の大きさ

次 →

拡大中はマウスや指でドラッグできます。100%では左右スワイプ・左右キーでページ送り。

いつものページで表示の変化を確かめる

レンダリングを理解するには、普段のページで「材料が画面になる順番」を探してみます。

1. ページを開いた直後に、最初に見える部分を観察する
2. 画像やフォントがあとから入ってくるかを見る
3. ボタンを押したとき、表示のどこが変わるか見る
4. スマホ幅とパソコン幅で並びが変わるか見る
5. 遅いと感じる場合、通信、画像、JavaScript、描画のどれに近いか分ける

ユイ

HTML、CSS、JavaScriptがそろったら、最後にどう画面になるんでしょう

マコト

材料を読むだけでは、まだ人に見える画面にはならないね

ピコ

そこでレンダリングを見る。ブラウザが材料を解釈して画面に描く処理だよ

サーバーからHTMLが返り、CSSや画像やJavaScriptが読み込まれても、それだけで利用者が見る画面になるわけではありません。ブラウザは材料を読み、構造を作り、見た目のルールを当て、配置を計算し、画面へ描きます。この一連の流れをレンダリングとして見ると、Webページ表示の最後の工程がつかみやすくなります。

第68話「レンダリングは何を描く？」では、JavaScript操作室を出たあと、ブラウザ工房のレンダリング作業台へ向かいます。画面のむこう側で、材料がどのように見える形になるのかを区別して考えます。

画面に組み立てる材料を知る

ページ全体の表示順を先に見たい場合は、Webページ表示の仕組み を横に置くと流れがつながります。

材料には、HTML、CSS、画像、フォント、JavaScriptによる変更などが含まれる場合があります。ブラウザは、それらをただ表示するのではなく、「何があるか」「どんな見た目か」「どこに置くか」「どの順番で描くか」を処理します。

材料の役割を戻って確認するなら、HTMLとは、CSSとは、JavaScriptとは がつながります。

ラボのたとえでは、レンダリングはブラウザ工房の作業台です。HTMLの骨組み、CSSの衣装、画像の部品、JavaScriptの変更が作業台に集まり、利用者に見える画面に組み立てられます。

表示工程だけでなくURLからの全体を戻って見るときは、Webサイトの仕組みの地図に「ブラウザが材料を描く」と一段だけ追記してください。

レンダリングで画面になるまでの流れ

レンダリングの流れは細かく分けると複雑ですが、初心者の入口では次の順番で見ると十分です。

1. HTMLを読み、ページの構造を作る
2. CSSを読み、見た目のルールを作る
3. どの要素にどのスタイルを当てるか決める
4. 要素の大きさや位置を計算する
5. 画面へ描く
6. JavaScriptや画像の読み込みで必要に応じて更新する

HTMLから作られる構造はDOM、CSSから作られる見た目の情報はCSSOMと呼ばれることがあります。これらの細かい用語を全部暗記しなくても、まずは「構造」「見た目」「配置」「描画」という段階に分けると理解しやすくなります。

イト

材料が届いたらすぐ画面、ではなくて、並べて描く作業があるんだね

ピコ

そう。ブラウザは材料を読み直しながら、見える画面に変えていくよ

DOMとCSSOMの役割

レンダリングでは、HTMLとCSSが別々の手がかりとして扱われます。

HTMLは、見出し、段落、リンク、画像などの構造を伝えます。ブラウザはHTMLを読み、DOMという内部の構造を作ります。

CSSは、色、余白、文字サイズ、配置などの見た目のルールを伝えます。ブラウザはCSSを読み、どの要素にどのスタイルを当てるかを判断します。このCSS側の情報を説明するときに、CSSOMという言葉が出ることがあります。

HTMLだけ、CSSだけ、JavaScriptだけで画面表示を説明しきるのは難しい場合があります。レンダリングでは、それらがどう合わさって見える画面になるかを見ます。

レイアウトと描画の違い・注意点

ブラウザは、部品の大きさや位置も計算します。

見出しはどの幅で折り返すか。画像はどの大きさで表示するか。カードは横に並ぶのか、縦に並ぶのか。本文の行間や余白はどのくらいか。こうした計算をレイアウトとして見ることがあります。

レイアウトが決まると、ブラウザは画面へ描きます。背景、文字、画像、線、影などが重なり、私たちが見るWebページになります。

このため、同じHTMLでもCSSが変われば見た目は変わります。同じCSSでも画面幅が変われば、レイアウトが変わることがあります。スマホとパソコンで並びが違うのも、レンダリングの中で条件に応じた見た目が作られているからです。

JavaScriptと再描画

JavaScriptが画面の部品をあとから変えると、ブラウザは必要に応じて表示を更新します。

たとえば、ボタンを押してメニューを開く、検索結果を追加する、エラーメッセージを出す、入力に合わせて文字数を更新する、といった場面です。DOMやスタイルが変われば、ブラウザはその変更を画面に反映します。

このとき、変更の内容によっては、配置の計算や描画がもう一度必要になる場合があります。小さな変更なら軽く済むこともありますが、大量の部品を何度も書き換えると重く感じることがあります。

JavaScriptが関わる画面では、「操作」「DOMの変更」「レイアウト」「描画」を分けて見ると、どこで時間がかかっているのかを考えやすくなります。

レンダリングが遅く感じるときの確認ポイント

ページが遅いとき、原因は通信だけとは限りません。

レンダリングに関係する確認先には、次のようなものがあります。

• HTMLやCSSが大きく、読み込みや解析に時間がかかる
• 画像やフォントが重く、描画に時間がかかる
• JavaScriptの実行が長く、画面更新が遅れる
• DOMの更新が多く、レイアウト計算が何度も起きる
• スマホなど端末側の処理能力が足りない
• 広告や外部ツールが多く、描画の途中で処理が増える

「インターネットが遅い」と感じても、実際には通信、サーバー、画像、JavaScript、ブラウザの描画、端末性能が組み合わさる場合があります。レンダリングを知っていると、画面が真っ白な時間、レイアウトがずれる瞬間、操作が重い場面を分けて見られます。

よくある疑問を確かめる

Q1. レンダリングを一文でいうと？

レンダリングは、HTMLやCSSなどをブラウザが解釈し、画面に見える形へ描く処理です。

Q2. HTMLからブラウザが作る内部構造は何と呼ばれますか？

DOMと呼ばれます。

Q3. レンダリングが遅く感じる原因は通信だけですか？

いいえ。画像、CSS、JavaScriptの実行、DOM更新、端末性能などが関係する場合があります。