06. ブラウザがページを表示する仕組み

この章では、ブラウザがHTML、CSS、JavaScriptを読み込み、画面に表示する流れを学びます。

ブラウザ内部の詳しい仕組みをすべて理解する必要はありません。Web制作では、なぜCSSが効かないのか、なぜJavaScriptが動かないのか、なぜ画像の読み込みが遅いと表示に影響するのかを理解できることが大切です。

HTMLを上から読む

ブラウザは、サーバーから受け取ったHTMLを読みます。

HTMLには、ページの構造と、追加で読み込むファイルの情報が書かれています。

HTMLの基本例
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assets/css/style.css">
    <script src="/assets/js/main.js" defer></script>
</head>
<body>
    <h1>サービス紹介</h1>
    <img src="/images/main.jpg" alt="">
</body>
</html>

ブラウザはHTMLを読みながら、CSS、JavaScript、画像などが必要だとわかると、それらも追加で読み込みます。

CSSを読み込んで見た目を作る

CSSは、HTMLの見た目を整えるためのファイルです。

CSSが正しく読み込まれないと、HTMLだけの素の表示になります。

よくある原因は次の通りです。

  • CSSファイルのパスが間違っている
  • ファイル名が違う
  • 本番環境で大文字と小文字が違う
  • CSSファイルのアップロードを忘れている
  • キャッシュで古いCSSが残っている

CSSが効かない時は、まずNetworkタブでCSSファイルが 200 で読み込まれているか確認します。

JavaScriptを読み込んで動きを付ける

JavaScriptは、ユーザー操作に応じてページの状態を変えるために使います。

たとえば、メニューを開く、タブを切り替える、フォームの入力を確認する、スクロール位置に応じて表示を変えるなどです。

JavaScriptが動かない時は、次のような原因があります。

  • JavaScriptファイルのパスが間違っている
  • HTMLより先にJavaScriptが実行されている
  • 対象の要素が存在しない
  • Consoleにエラーが出ている
  • ライブラリの読み込み順が間違っている

JavaScriptは、ConsoleタブとNetworkタブの両方で確認します。

DOMとは

DOMは、ブラウザがHTMLを扱うための形にしたものです。

JavaScriptでは、このDOMを操作して、HTMLの状態を変えます。

DOMを操作する例
const button = document.querySelector(".js-button");

button.addEventListener("click", () => {
    button.classList.toggle("is-active");
});

このコードでは、HTML内の .js-button という要素を探し、クリックされた時にクラスを切り替えています。

つまり、JavaScriptはHTMLファイルそのものを書き換えているのではなく、ブラウザ上に作られたDOMを操作しています。

CSSOMのざっくり理解

CSSOMは、ブラウザがCSSを扱うための構造です。

HTMLからDOMが作られるように、CSSからCSSOMが作られます。

ブラウザはDOMとCSSOMをもとに、どの要素をどの見た目で表示するかを決めます。

詳しい内部構造まで覚える必要はありません。

Web制作では、HTMLの構造とCSSの指定が組み合わさって画面ができる、と理解しておけば十分です。

レンダリングの大まかな流れ

ブラウザが画面を表示することを、レンダリングと呼びます。

大まかな流れは次の通りです。

  1. HTMLを読み込む
  2. CSSを読み込む
  3. DOMとCSSOMを作る
  4. どの要素をどの位置に置くか計算する
  5. 画面に描画する
  6. JavaScriptや画像読み込みによって必要に応じて更新する

Web制作で重要なのは、CSSやJavaScriptの読み込み方が表示速度や動作に影響することです。

JavaScriptの読み込み位置

JavaScriptを読み込む位置によって、動作が変わることがあります。

たとえば、HTMLの要素がまだ読み込まれる前にJavaScriptが実行されると、対象要素を取得できないことがあります。

deferを付けた読み込み
<script src="/assets/js/main.js" defer></script>

defer を付けると、HTMLの読み込みを邪魔しにくく、DOMが準備されたあとにJavaScriptを実行できます。

Web制作では、外部JavaScriptファイルに defer を付けることがよくあります。

画像やフォントの読み込み

画像やWebフォントも、ページ表示に影響します。

画像が大きすぎると、表示に時間がかかります。

Webフォントの読み込みが遅いと、文字の表示が一瞬変わることがあります。

Web制作では、次の点を意識します。

  • 画像サイズを必要以上に大きくしない
  • 適切な画像形式を使う
  • 重要な画像の読み込みを確認する
  • フォントを読み込みすぎない
  • 不要な外部ファイルを増やさない

表示速度は、デザインやSEO、ユーザー体験にも関係します。

CSSやJSが読み込まれない時の確認

CSSやJavaScriptが効かない時は、次の順番で確認します。

  1. HTMLの読み込み指定が正しいか
  2. ファイルのパスが正しいか
  3. Networkタブで 200 になっているか
  4. Consoleにエラーが出ていないか
  5. キャッシュを無効化して確認したか
  6. 本番環境で大文字と小文字が一致しているか

この章のまとめ

  • ブラウザはHTMLを読み、CSS、JavaScript、画像などを追加で読み込む
  • CSSが読み込まれないと見た目が崩れる
  • JavaScriptが動かない時は、読み込みエラーとConsoleエラーを分けて確認する
  • DOMは、ブラウザがHTMLを扱うための構造
  • defer を使うと、JavaScriptの実行タイミングを扱いやすくなる
  • 画像やフォントの読み込みも表示速度に影響する