ひとことで
ブラウザは HTML で中身と構造を、CSS で見た目を読み、要素の配置を計算してから画面に描く。
Web の画面は、HTML（何がどの順で並ぶか・それぞれの意味）と CSS（色・大きさ・配置のルール）の組み合わせでできています。ブラウザはこの2つを読んで、要素の位置と大きさを計算し、画面に描きます。
| 段階 | 起きること | デザインとの関係 |
|---|---|---|
| HTML・CSS を読む | サーバーから届いた順に読み始める | 最初に見える部分の素材が重いと、表示が遅れる |
| 配置の計算（レイアウト） | 画面幅に合わせて各要素の位置・大きさを決める | レスポンシブのルールはここで効く。画像の大きさが未定だと後でずれる |
| 描画 | 色・文字・画像・影を描く | 大きな影やぼかしを多用すると描く手間が増える |
| 後から届くもの | 画像・Web フォント・データ | 届いたときに配置が変わらないよう、場所を先に確保する |
この流れを知っていると、「画像の縦横比を決めてほしい」「幅を動かすアニメーションは避けたい」というエンジニアの要望の理由が分かります。
面接ではこう答える
ブラウザは、サーバーから届いた HTML を読んで要素の木を作り、CSS のルールを当てはめて、各要素の位置と大きさを計算し、最後に色や文字を描きます。画像やフォントは後から届くことが多いので、届いたときに配置が変わらないよう、大きさを先に決めておくことが大事です。また、幅や高さを変えるアニメーションは配置の計算をやり直すので重く、位置の移動や透明度の変化は軽い、という違いもこの流れから来ています。
デザイナーとの関わり画像の縦横比を決める理由、アニメーションの軽さ、読み込み中の表示を決めるときの根拠になります。