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

CSSで生成されるボックスの種類とは？ブロックレベルとインラインレベルの違いを解説

CSSの視覚整形モデル（Visual Formatting Model）では、文書ツリー内のすべての要素が処理され、それぞれに対して1つ以上の「ボックス」が生成されます。生成されたボックスには特定のCSSプロパティが関連付けられ、その内容に応じてHTML上に描画されます。

この記事では、CSSで生成される主なボックスの種類について、コード例を交えながらわかりやすく解説します。

CSSで生成されるボックスの分類

CSSでは、主に以下の2種類のボックスが生成されます。

  • ブロックレベル要素とブロックボックス
    • 匿名ブロックボックス（Anonymous block boxes）
  • インラインレベル要素とインラインボックス
    • 匿名インラインボックス（Anonymous inline boxes）

ブロックレベル要素とブロックボックスとは

ブロックレベル要素は、親要素の利用可能な幅全体を占有し、前後に改行が入るような振る舞いをする要素です。代表的な例として <div> や <p> などが挙げられます。これらの要素から生成されるのが「ブロックボックス」です。

インラインレベル要素とインラインボックスとは

インラインレベル要素は、テキストの流れの中に組み込まれる要素で、前後に改行を伴いません。<span> や <a> などが代表例です。これらの要素から生成されるのが「インラインボックス」です。

例1：ブロックレベル要素とブロックボックス

まずは、ブロックレベル要素とブロックボックスの動作を確認するサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>CSS ブロックレベル要素とブロックボックス</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    box-sizing: border-box;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    height: 40px;
    width: 100%;
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS ブロックレベル要素とブロックボックス</legend>
<div id="container">Color Orange
<div class="child"></div>Color Red
<div class="child"></div>Color Violet
<div class="child"></div>
</div><br>
</body>
</html>

出力結果

このコードを実行すると、以下のような表示になります。

CSSで生成されるボックスの種類とは？ブロックレベルとインラインレベルの違いを解説

<div class="child"> のようなブロックレベル要素は、それぞれが独立した行として描画され、横幅いっぱいに広がることが確認できます。テキスト部分は「匿名ブロックボックス」として扱われます。

例2：インラインレベル要素とインラインボックス

次に、インラインレベル要素とインラインボックスの動作を確認するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<title>CSS インラインレベル要素とインラインボックス</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
}
input[type="button"] {
    border-radius: 10px;
}
.child{
    color: white;
    border: 4px solid black;
}
.child:nth-of-type(1){
    background-color: #FF8A00;
}
.child:nth-of-type(2){
    background-color: #F44336;
}
.child:nth-of-type(3){
    background-color: #C303C3;
}
.child:nth-of-type(4){
    background-color: #4CAF50;
}
.child:nth-of-type(5){
    background-color: #03A9F4;
}
.child:nth-of-type(6){
    background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS インラインレベル要素とインラインボックス</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html>

出力結果

このコードを実行すると、以下のような表示になります。

CSSで生成されるボックスの種類とは？ブロックレベルとインラインレベルの違いを解説

<span class="child"> のようなインラインレベル要素は、テキストの流れの中に連続して並び、改行されないことがわかります。周囲のテキストは「匿名インラインボックス」として扱われます。

まとめ

CSSの視覚整形モデルにおいて、各要素からどのようなボックスが生成されるかを理解することは、レイアウトを正確に制御するうえで非常に重要です。ブロックボックスは縦方向に積み重なり、インラインボックスは行内に並ぶという基本原則を押さえておきましょう。また、要素に囲まれたテキストなどは匿名ボックスとして自動的に生成される点も覚えておくと、意図しないレイアウト崩れの原因を特定しやすくなります。

  1. CSSのインラインレベル要素とインラインボックスの違いをわかりやすく解説

    インラインレベル要素とは？ インラインレベル要素とは、CSSのdisplayプロパティが「inline」「inline-table」「inline-block」のいずれかに設定されている要素のことです。この種の要素は、自身の前後で強制的な改行を行いません。また、各インラインレベル要素は、配置スキームの一部として振る舞うと同時に、子ボックスを内包する「インラインレベルボックス」を生成します。 インラインボックスとは？ インラインボックスとは、その内容がインライン整形コンテキスト（inline formatting context）に従って表示されるボックスのことです。インラインボックスは、行の

  2. CSSの要素タイプセレクターとは？基本構文と実例をわかりやすく解説

    CSSの要素タイプセレクターは、指定した種類の要素をすべて一括で選択するためのセレクターです。たとえば「li」と指定すれば、ページ内のすべてのリスト項目に同じスタイルが適用されます。HTML文書全体に共通のデザインを設定したい場合に非常に便利な、CSSの基本的なセレクターです。 構文 要素タイプセレクターの書き方は以下のとおりです。セレクター名として要素名をそのまま記述します。 element {    /*declarations*/ } サンプルコード1：リストとdiv要素への適用例 次の例では、li 要素と div 要素に対してそれぞれスタイルを指定しています。 &l