CSSビジュアルフォーマットモデルとは？ブロックレベルとインラインレベルのボックス生成を解説
CSSビジュアルフォーマットモデル（Visual Formatting Model）は、ドキュメント内の各要素を処理・変換し、CSSボックスモデルに準拠した1つ以上のボックスを生成するアルゴリズムに対応するモデルです。ブラウザはこのモデルに基づいて、HTML文書のすべての要素を「ボックス」として扱い、その配置方法や表示形式を決定します。
処理された要素から生成されるボックスには、主に次の2種類があります。
ブロックレベルボックス
- 要素の前後で強制的に改行が入ります。コンテンツが幅全体を必要としない場合でも、利用可能な領域いっぱいの幅を占有します。
- 例：区分コンテナ（<div>）、見出し要素（<h1>〜<h6>）など
インラインレベルボックス
- 前後で改行を強制せず、コンテンツの表示に必要な幅だけを占有します。
- 例：汎用インラインコンテナ（<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;
}
</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」ボタンをクリックすると、次のように表示されます。
テキストフィールドに文字列を入力し、「h2」ラジオボタンを選択した状態で「Preview」ボタンをクリックすると、次のように表示されます。
続いて、インラインレベルボックスが生成される例を確認しましょう。
インラインレベルボックスの生成例
ここでは、em要素を使用した例を紹介します。
サンプルコード
<!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;
}
</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」ボタンをクリックする前の表示：
「Check」ボタンをクリックした後の表示：
-
CSSのclientHeight・offsetHeight・scrollHeightの違いと使い分けを徹底解説
JavaScriptでDOM要素の高さを取得するときによく使われるのが、clientHeight、offsetHeight、scrollHeight の3つのプロパティです。いずれも要素の高さをピクセル単位で返しますが、パディング・ボーダー・はみ出したコンテンツの扱いがそれぞれ異なるため、用途に応じた使い分けが必要です。本記事では、各プロパティの特徴と違いを、サンプルコード付きでわかりやすく解説します。clientHeightとはclientHeight は、要素の「見えている内部領域」の高さを返すプロパティです。具体的には、コンテンツ部分と上下のパディングを合計した値になります。ボーダーやマ
-
HTMLの見出し（h1〜h6）とは？使い方とSEOにおける重要性を解説
HTMLの見出し（Heading）とは、<h1>から<h6>までの6つのレベルで構成される要素のことです。h1が最も重要度の高い見出しレベルであり、h6に向かうにつれて重要度が低くなります。つまり、H1・H2・H3・H4・H5・H6の6段階の見出しが用意されています。 ポイント： 見出しは、Googleなどの検索エンジンがウェブページのコンテンツをインデックス（登録）する際に重要な手がかりとして利用されます。そのため、適切な見出し構造はSEO対策の面でも非常に有効です。 見出しタグの役割 <h1>： ページ内で最も重要な大見出し。原則として1ページに1つ使