メインコンテンツへスキップ

HTMLのレンダリング

1.レンダリングとは

レンダリングは、
データやファイル等を元に
画像・映像・音声などを
生成することです。

レンダリング (Rendering)とは、データやファイル等を元に画像・映像・音声などを生成する事です。
HTMLでは仕様の提示と共に文書をレンダリングする為の一連の提案がされています。「必須」ではなく「期待される」提案です。この提案で、ユーザーエージェントがビジュアルメディア(視覚的媒体)のドキュメントツリーを処理する方法をビジュアルフォーマットモデルと言います。ユーザーエージェントの違いにより、レンダリングの結果が異なる事もあるので、注意が必要です。

[ユーザーエージェント:元の文書(ソースドキュメント)を、利用者(ユーザー)に代わって解釈するもの(エージェント)。ブラウザなどの HTML文書を見る為の道具(ツール, アプリ)の事。]

この提案は、一般的に CSS用語で表現されています。ユーザーエージェントは、CSSをサポートするか、この提案に示されている CSSルールを他のプレゼンテーションメカニズムの近似値に変換する事が求められます。 反対のスタイルレイヤールール(作成者スタイルシートなど) がない場合、ユーザーエージェントは、この仕様で説明されている様に、要素が表す意味をユーザーに伝えるように要素をレンダリングする事が求められます。 この提案は、一般的に 96dpi 以上の解像度を持つ視覚出力メディアを想定していますが、HTMLは複数のメディアに適用する事を意図しています。(メディアに依存しない言語です) ユーザーエージェントの実装者は、この提案をターゲットメディアに適応させる事が推奨されます。

要素は、関連付けられた CSSレイアウトボックス, SVGレイアウトボックス, または他のスタイル言語の同等の物がある場合にレンダリングされます。

これらの提案で指定されている CSSルールは、特に指定がない限り、HTML要素を含むすべてのドキュメントのユーザーエージェントレベルのスタイルシートのデフォルトの一部として使用される事が想定されています。 一部のルールは、CSSカスケードの作成者レベルのゼロ詳細度のプレゼンテーションヒント部分を対象としており、これらはプレゼンテーションヒントとして明示的に呼び出されます。

2.ビジュアルフォーマットモデル

ビジュアルフォーマットモデルは、
ユーザーエージェントが
ビジュアルメディアの
ドキュメントツリーを
処理する方法です。

ビジュアルフォーマットモデル (Visual formatting model.) とは、ユーザーエージェントが視覚的媒体のドキュメントツリーを処理する方法です。視覚的媒体用整形書式と、とりあえず言い換えてみました。

ビジュアルフォーマットモデルでは、ドキュメントツリーの各要素は、ボックスモデル(箱の雛型)に従って0個以上のボックス(箱)を生成します。これらのボックスのレイアウトは、次の要素によって決まります。

  • ボックスの寸法とタイプ。
  • 位置決めスキーム。(通常フロー, フロート, 絶対位置決め)
  • ドキュメントツリー内の要素間の関係。
  • 外部情報。(例：ビューポートのサイズ, 画像の固有寸法など)

ボックスの寸法は、「ボックスモデル」で記しています。タイプは、「レンダリングの提案」で記しています。

フォーマットモデル 生成するボックス 参加するボックス
ブロックフォーマットコンテキスト ブロックコンテナボックス
(テーブルラッパーボックス) 		ブロックレベルボックス
インラインフォーマットコンテキスト ブロックコンテナボックス インラインレベルボックス
テーブルモデル テーブルグリッドボックス 内部テーブルボックス
ルビモデル ルビコンテナボックス ルビレベルボックス
フレックスフォーマットコンテキスト フレックスコンテナボックス フレックスコンテナボックスの子ボックス

このビジュアルフォーマットモデルについて、「ビジュアルフォーマットモデル」のページで、改めて記述しています。

3.ボックスモデル

文書をレイアウトする際に、
それぞれの要素を標準的な
CSSボックスモデルに基づいた
長方形のボックスとして
表現します。

ボックスモデル (box model.)とは、ドキュメントツリー(document tree.)内の要素に対して生成され、視覚的な書式設定モデル(visual formatting model.)に従ってレイアウトされる長方形のボックスのモデルです。ボックスについての基本的な概念だと思います。

それぞれのボックスは コンテンツ領域, パディング領域, ボーダー領域, マージン領域 と定義されています。その事について、「ボックスモデル」のページで、改めて記述しています。

マージン領域
ボーダー領域
パディング領域
コンテンツ
領域

4.displayプロパティでのレンダリング提案

主要なボックス(箱)が
流れの設計に
どのように関与するかや、
置換要素を除いた
ボックスが生成する
フォーマットコンテキストの
種類を
CSSのdisplayプロパティは、
示します。

レンダリングする為の一連の提案の中で、CSSの displayプロパティ を用いて行われる部分の一部を、「displayプロパティでのレンダリング一覧」のページで、改めて記述しています。

5.要素の外部表示種別

外部表示種別は、
主要なボックス(箱)が
流れの設計に
どのように関与するかを
示します。

CSSの displayプロパティは、主要なボックス(箱)が流れの設計にどのように関与するかを示します。「〇〇レベルボックス」

ブラウザーの互換性が不十分ですが、CSSの Level 3 仕様書では displayプロパティに２つの値を指定する方法を提示していて、1つ目の値がこの外部表示種別を示すとしています。

CSSの floatプロパティの値が none 以外の場合に、displayプロパティの計算値がdisplayプロパティに２つの値を指定する方法での、１つ目の値に block を指定するに当たる状態に変更されます。

〇〇レベルボックス 参加するフォーマットモデル
インラインレベルボックス インラインフォーマットコンテキスト
ブロックレベルボックス ブロックフォーマットコンテキスト
内部テーブルボックス 表(テーブル)モデル
(テーブルフォーマットコンテキスト)
ルビレベルボックス ルビモデル
(ルビフォーマットコンテキスト)
フレックスコンテナボックスの子ボックス フレックスフォーマットのコンテキスト
display: none ボックスやテキストの実行を生成しない

この外部表示種別について、「要素の外部表示種別」のページで、改めて記述しています。

6.要素の内部表示種別

内部表示種別は、
置換要素を除いた
ボックスが生成する
フォーマットコンテキストの
種類を定義します。

CSSの displayプロパティは、置換要素(replaced elements)を除いたボックス(箱)が生成するフォーマットコンテキストの種類を定義し、子孫ボックスの配置方法を示します。
置換要素は、内容(コンテンツ)が CSSフォーマットモデルの範囲外の要素です。

〇〇コンテナボックス 確立するフォーマットモデル
インラインボックス なし
ブロックコンテナボックス ブロックフォーマットコンテキスト
インラインフォーマットコンテキスト
テーブルラッパーボックス ブロックフォーマットコンテキスト
テーブルグリッドボックス テーブルフォーマットコンテキスト
ルビコンテナボックス ルビフォーマットコンテキスト
フレックスコンテナボックス フレックスフォーマットコンテキスト

この内部表示種別について、「要素の内部表示種別」のページで、改めて記述しています。

7.ホワイトスペース

HTMLでは、
ホワイトスペースは
ほとんど無視されます。

ホワイトスペースとは、スペース、タブ、改行 (正確には、CRLF シーケンス、キャリッジリターン、改行) のみで構成されたテキストの文字列のことです。

HTMLでのホワイトスペースの扱いについて、「HTMLのホワイトスペース」のページで、改めて記述しています。

  1. <div>
  2. a
  3. b
  4. <span>c</span
  5. ><span>d</span>
  6. <span>e</span>
  7. f
  8. </div>
  9. <div> a b c d </div>

改行コードは、空白として扱われます。
段落の最初と最後の空白は無視されるので、実質的には段落の最初と最後の改行コードは無視されます。

４行目の改行コードはタグの中なので、ここが空白として扱われても改行として扱われても何も影響はありません。 というより、自分自身の前後に改行を生成しない要素の直後に改行コードがあると空白として扱われてしまうので、意図的にタグの中に改行コードを収める記述が必要な場合があります。

段落の最初と最後の空白は無視されます。段落中の２つ以上の連続する空白は１つにまとめられます。このまとめる対象は、改行コードから空白として扱われる分を含みます。

例示では、文字列の範囲(空白の有無)を視覚化する為に、CSSで文字に下線を装飾しています。

a b cd e f
a b c d

8.スタイルシート

HTMLでは、
スタイルシートを用いて
体裁や見栄えを指定できます。

HTMLでは、CSS と呼ばれるスタイルシート言語を用いて、体裁や見栄えを指定する事が出来ます。

そのスタイルシートを用いる方法ですが、style属性を用いる, style要素を用いる, link要素を用いる などになります。

CSSに関しては、「離珠のCSSでしぃ！」で記述しています。

下線

  1. <p style="text-decoration: underline;">下線</p>

この例では、style属性に CSS を記述する方法を例示しています。「下線」というテキストに CSS で下線を装飾しています。