CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSビジュアルフォーマットモデルとは？ボックス生成の仕組みをわかりやすく解説

CSSビジュアルフォーマットモデル（Visual Formatting Model）とは、ドキュメント内の各要素を処理・変換し、CSSボックスモデルに準拠した1つ以上のボックスを生成するためのアルゴリズムのことです。ブラウザがHTMLの各要素をどのように画面上に配置するかを決定する、レイアウトの中核となる仕組みといえます。

ボックスのレイアウトに影響する主な要素

生成されたボックスのレイアウトは、以下のような複数のプロパティや条件によって決まります。

  • 寸法（Dimensions）：要素の幅や高さ
  • タイプ：ブロックレベル、インライン、インラインブロック、アトミックインラインレベルなど
  • 配置方法：通常フロー、フロート（float）、絶対配置（absolute）など
  • 他要素との関係：子要素や隣接する要素との位置関係
  • 外部情報：ビューポートのサイズや画像の幅・高さなど

ブロックレベル要素とインラインレベル要素

処理された要素から生成されるボックスには、大きく分けて2種類あります。

ブロックレベル（Block level）

  • 要素の前後で強制的に改行が入り、コンテンツが必要としなくても利用可能な幅全体を占有します。
  • 例：<div>、見出し要素（<h1>〜<h6>）など

インラインレベル（Inline level）

  • 前後で改行されず、コンテンツに必要な幅だけを占有します。
  • 例：<span>、<strong> など

サンプルコード①：ブロックレベルボックスの生成

以下は、ブロックレベルボックスの生成を確認できる例です。入力したテキストを見出しタグとしてプレビュー表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
#headingPreview h2{
    background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML Heading</legend>
<input type="text" id="textSelect" placeholder="Type Heading Here...">
<div id="radioBut">
<label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked >
<label>H2</label><input class="radio" type="radio" name="heading" value="h2">
<label>H3</label><input class="radio" type="radio" name="heading" value="h3">
<label>H4</label><input class="radio" type="radio" name="heading" value="h4">
<label>H5</label><input class="radio" type="radio" name="heading" value="h5">
<label>H6</label><input class="radio" type="radio" name="heading" value="h6">
</div>
<div>Heading Preview: <span id="headingPreview">Output will show up here</span></div>
<input type="button" onclick="changeHeading()" value="Preview">
</fieldset></form>
<script>
var textSelect = document.getElementById("textSelect");
var headingPreview = document.getElementById("headingPreview");
function changeHeading() {
    if(textSelect.value === '')
        headingPreview.innerHTML = 'Write a Heading';
    else{
        for(var i=0; i<6; i++){
            var radInp = document.getElementsByClassName('radio')[i];
            if(radInp.checked === true && textSelect.value !== ''){
                headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
                headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>';
            }
        }
    }
}
</script></body></html>

実行結果

このコードを実行すると、次のような結果が得られます。

テキストフィールドが空の状態で「Preview」ボタンをクリックした場合：

CSSビジュアルフォーマットモデルとは？ボックス生成の仕組みをわかりやすく解説

テキストフィールドに入力があり、「h2」のラジオボタンを選択した状態で「Preview」ボタンをクリックした場合：

CSSビジュアルフォーマットモデルとは？ボックス生成の仕組みをわかりやすく解説

見出し要素（h1〜h6）はブロックレベルであるため、それぞれの見出しが独立した行として表示され、前後に改行が入ることが確認できます。

サンプルコード②：インラインレベルボックスの生成

続いて、インラインレベルボックスの生成を確認できる例です。入力したテキストを<em>要素として2つ追加表示します。

<!DOCTYPE html>
<html>
<head>
<title>em element</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
em{
    background-color: #FF8A00;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>em-element</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function convertItalic() {
    for(i=0; i<2; i++){
        var italicObject = document.createElement("EM");
        var italicText = document.createTextNode(textSelect.value);
        italicObject.appendChild(italicText);
        divDisplay.appendChild(italicObject);
    }
}
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような結果が得られます。

「Check」ボタンをクリックする前：

CSSビジュアルフォーマットモデルとは？ボックス生成の仕組みをわかりやすく解説

「Check」ボタンをクリックした後：

CSSビジュアルフォーマットモデルとは？ボックス生成の仕組みをわかりやすく解説

<em>要素はインラインレベルであるため、2つの要素が同じ行内に並んで表示されます。これがブロックレベル要素との大きな違いです。

まとめ

CSSビジュアルフォーマットモデルは、ドキュメントの各要素をボックスへと変換し、その種類（ブロックレベルかインラインレベルか）や配置方法に応じてレイアウトを決定する重要な仕組みです。ブロックレベル要素は行全体を占有して縦に積み重なり、インラインレベル要素は行内に横並びで流し込まれます。この違いを理解することで、意図通りのCSSレイアウト設計ができるようになります。

  1. CSS appearanceプロパティで作るカスタムラジオボタンの実装方法

    CSSのappearanceプロパティを使用すると、ユーザーのOS（オペレーティングシステム）が標準で備えるプラットフォームネイティブなスタイルに基づいて要素をスタイリングできます。このプロパティを「none」に設定すれば、ブラウザ既定の外観を無効化でき、ラジオボタンやチェックボックスなど、通常はスタイル変更が難しいフォーム部品も自由にデザインできるようになります。 appearanceプロパティの構文 CSSのappearanceプロパティの基本構文は以下のとおりです。 Selector { appearance: /*値*/; -webkit-appearance: /*値

  2. HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説

    HTMLの見出し（Heading）とは、<h1>から<h6>までの6つのレベルで構成される要素のことです。h1が最も重要度の高い見出しレベルであり、h6に向かうにつれて重要度が低くなります。つまり、H1・H2・H3・H4・H5・H6の6段階の見出しが用意されています。 ポイント： 見出しは、Googleなどの検索エンジンがウェブページのコンテンツをインデックス（登録）する際に重要な手がかりとして利用されます。そのため、適切な見出し構造はSEO対策の面でも非常に有効です。 見出しタグの役割 <h1>： ページ内で最も重要な大見出し。原則として1ページに1つ使