---
title: "レンダリングとは？HTMLが画面に描かれるまでの流れ"
description: "URLを入力してからページが見えるまでの間、ブラウザは何をしているのでしょうか。HTML解析・スタイル計算・レイアウト・描画という一連のステップを追いながら、ページが画面に現れるまでの流れを説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-rendering-flow"
markdown: "https://giga-site.com/articles/what-is-rendering-flow/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# レンダリングとは？HTMLが画面に描かれるまでの流れ

URLを開くとページが表示される。その裏でブラウザは、受け取ったHTMLやCSSを何段階もの処理を経て画面の絵に変えています。この一連の作業がレンダリングです。この記事では、解析から描画までの流れを、ひとつずつ追いかけて分かりやすく説明します。

> Source HTML: https://giga-site.com/articles/what-is-rendering-flow
> Article index: https://giga-site.com/articles/index.md

## レンダリングは「文書を絵に変える仕事」

レンダリングとは、ブラウザがHTMLやCSSといった文書を読み取り、最終的に画面に表示される見た目へと変換する処理全体を指します。文字や数値で書かれた指示を、人が見られる絵にする作業です。

この処理はひとつの操作ではなく、いくつかの段階に分かれています。それぞれの段階が何をしているかを知ると、表示が遅くなる原因や、見た目が崩れる理由を理解しやすくなります。

## まずHTMLとCSSを構造に変える

最初にブラウザはHTMLを解析してDOMという木構造を作ります。同時にCSSも解析して、スタイルの規則をまとめたCSSOMという構造を作ります。どちらも、後の処理で扱いやすいように整理された内部表現です。

DOMが「何があるか」を、CSSOMが「それをどう見せるか」を表しているとイメージすると分かりやすいです。この二つがそろって初めて、実際の見た目を計算する準備が整います。

## 実務ではどこで関係する？

レンダリングとはは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

レンダリングについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 描画に必要な情報を組み合わせる

次にブラウザはDOMとCSSOMを組み合わせ、画面に表示すべき要素とそのスタイルをまとめた木を作ります。表示されない要素はここで除かれ、実際に描く対象だけが残ります。

この段階で、各要素にどんな色や大きさが適用されるかが決まります。要素と見た目が結びついた状態になり、次の位置決めへと進みます。

## レンダリングの主な段階

全体の流れを順番に並べると、おおまかに次のようになります。一つずつ進むことで、文書が画面の絵へと仕上がっていきます。

1. 解析：HTMLからDOM、CSSからCSSOMを作る
2. スタイル計算：各要素に適用するスタイルを決める
3. レイアウト：要素の位置と大きさを計算する
4. ペイント：色や文字を実際に描く
5. 合成：描いた層を重ねて最終的な画面にする

## 変更があると一部の段階がやり直される

ページが表示されたあとも、JavaScriptで内容を変えたりサイズが変わったりすると、レンダリングの一部がやり直されます。位置や大きさが変わるとレイアウトから、色だけが変わるならペイントから再計算されます。

頻繁にレイアウトをやり直すような変更は処理が重くなりがちです。仕組みを知っておくと、なぜ動きがカクつくのか、どこを軽くすればよいのかの見当がつきやすくなります。

## 流れを知ると速さの改善点が見える

レンダリングの段階が頭に入っていると、表示が遅いときにどこが原因かを切り分けられます。解析が止まっているのか、レイアウトが重いのか、見当がつくようになります。

改善前後の表示を関係者に見比べてもらうときは、ギガサイト便のような一時URLで共有すると、CDNのエッジ配信で速く表示される状態のままチェックしてもらえます。

## よくある質問

### レンダリングとは一言で言うと何ですか？

ブラウザがHTMLやCSSを読み取り、画面に表示される見た目に変換する処理全体のことです。解析、スタイル計算、レイアウト、ペイントなどの段階に分かれています。

### DOMとCSSOMの違いは何ですか？

DOMはHTMLから作られる「何があるか」を表す構造、CSSOMはCSSから作られる「どう見せるか」を表す構造です。両方を組み合わせて見た目を計算します。

### レイアウトとペイントはどう違いますか？

レイアウトは各要素の位置と大きさを計算する段階で、ペイントはその結果に色や文字を実際に描く段階です。位置が変わるとレイアウトから、色だけならペイントからやり直されます。

### なぜページの動きがカクつくことがあるのですか？

レイアウトのやり直しが頻繁に起きると処理が重くなるためです。位置や大きさを何度も変える処理は負荷が高く、表示の滑らかさに影響します。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)
- [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "レンダリングとは？HTMLが画面に描かれるまでの流れ",
  "description": "URLを入力してからページが見えるまでの間、ブラウザは何をしているのでしょうか。HTML解析・スタイル計算・レイアウト・描画という一連のステップを追いながら、ページが画面に現れるまでの流れを説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-rendering-flow",
  "url": "https://giga-site.com/articles/what-is-rendering-flow",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "レンダリングとは一言で言うと何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザがHTMLやCSSを読み取り、画面に表示される見た目に変換する処理全体のことです。解析、スタイル計算、レイアウト、ペイントなどの段階に分かれています。"
      }
    },
    {
      "@type": "Question",
      "name": "DOMとCSSOMの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "DOMはHTMLから作られる「何があるか」を表す構造、CSSOMはCSSから作られる「どう見せるか」を表す構造です。両方を組み合わせて見た目を計算します。"
      }
    },
    {
      "@type": "Question",
      "name": "レイアウトとペイントはどう違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "レイアウトは各要素の位置と大きさを計算する段階で、ペイントはその結果に色や文字を実際に描く段階です。位置が変わるとレイアウトから、色だけならペイントからやり直されます。"
      }
    },
    {
      "@type": "Question",
      "name": "なぜページの動きがカクつくことがあるのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "レイアウトのやり直しが頻繁に起きると処理が重くなるためです。位置や大きさを何度も変える処理は負荷が高く、表示の滑らかさに影響します。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```