適用要素
Updated / Published
CSS の各プロパティはすべての要素に適用できるとは限りません。そのプロパティを適用できるのがdisplay : block ;の要素に限られているものやdisplay : inline ;に限られているものなど、各CSS のプロパティを適用できる要素は以下のように区分けされます。
ブロックボックスを形成する要素
CSSでdisplay : block ;が指定されているブロックボックスを形成する要素のことを指します。
HTML4.01, XHTML1.0, XHTML1.1ではブロックレベル要素に分類される次の要素型名には、あらかじめdisplay : block ;が指定されています。
インラインボックスを形成する要素
CSSでdisplay : inline ;が指定されているインラインボックスを形成する要素のことを指します。
HTML4.01, XHTML1.0, XHTML1.1ではインライン要素に分類される次の要素型名には、あらかじめdisplay : inline ;が指定されています（ただし、内容もたない空要素を除く）。
インラインブロックボックスを形成する要素
CSSでdisplay : inline-block ;が指定されているインラインブロックボックスを形成する要素のことを指します。このボックスは、インラインボックスのように行内にレンダリングされるブロックボックスで、幅や高さの指定、上下のマージンの指定も有効です。
(X)HTMLにあらかじめインラインブロックボックスを形成する該当要素はありませんが、置換インライン要素がインラインブロックボックスと同じ振る舞いをします。
置換インライン要素
置換インライン要素は、HTML4.01, XHTML1.0, XHTML1.1におけるインライン要素の中でも当該要素の属性に入力される値などによって内容が置き換えられ、その寸法で認識される要素にあたります。HTML4.01, XHTML1.0, XHTML1.1では次の要素型名が該当します。
なお、インライン要素の中で置換インライン要素以外の要素を非置換インライン要素と呼びます。
各ボックスの振る舞いの比較
ブロックボックス、インラインボックス、インラインブロックボックスのそれぞれのボックスの差に違いがあるので一覧にして比較すると次のようになります。
| ブロックボックス インラインブロックボックス |
インラインボックス | |
|---|---|---|
| 高さ(height) | 指定可 | 指定不可 |
| 横幅(width) | 指定可 | 指定不可 |
| 左右のマージン(margin) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のパディング(padding) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 左右のボーダー(border) | 要素の左右に存在 | 最初の文字の左側と、最後の文字の右側に存在 |
| 上下のマージン(margin) | 要素の上下に存在 | 無視され、レイアウトに影響は無い |
| 上下のパディング(padding) | 要素の上下に存在 | 全ての行に存在し、ボーダーの位置に影響が出る |
| 上下のボーダー(border) | 要素の上下に存在 | 各行に存在するが、他の行に重なる場合がある |
表要素
table要素をはじめ、表（テーブル）を生成するための要素をまとめて表要素と呼び、表を構成する要素はそれぞれ次のように分類されます。
- 表要素
- CSSで
display : table ;が指定されているブロックボックスを形成する要素、またはdisplay : inline-table ;が指定されているインラインブロックボックスを形成する要素のことを指す。
(X)HTMLのtable要素がdisplay : table ;に該当する。 - 表のキャプション要素
- CSSで
display : table-caption ;が指定されている要素のことを指す。
(X)HTMLのcaption要素がこれに該当する。 - 表の列・列グループ要素
- CSSで
display : table-column ;、またはdisplay : table-column-group ;が指定されている要素のことを指す。
(X)HTMLのcol要素,colgroup要素がこれらに該当する。 - 表の行・行グループ要素
- CSSで
display : table-row ;、display : table-header-group ;、display : table-footer-group ;、display : table-row-group ;のいずれかが指定されている要素のことを指す。
(X)HTMLのtr要素,thead要素,tfoot要素,tbody要素がこれらに該当する。 - 表のセル要素
- CSSで
display : table-cell ;が指定されている要素のことを指す。
(X)HTMLのtd要素, th要素がこれに該当する。
なお、border-collapseプロパティによる表示モデルが結合ボーダーモデルと分離ボーダーモデルとで振る舞いに以下の差異があります。
- 分離ボーダーモデル（
border-collapse : separate ;）のセルの背景領域はボーダー（枠線）の領域まで（内容領域+パディング+ボーダー）ですが、結合ボーダーモデル（border-collapse : collapse ;）のセルの背景領域はパディング領域まで（内容領域+パディング）になります。 - 分離ボーダーモデル（
border-collapse : separate ;）の表のうち、行・行グループ要素と列・列グループ要素は、ボーダー関連プロパティの適用対象となることができません。結合ボーダーモデル（border-collapse : collapse ;）の表では行・行グループ要素と列・列グループ要素も適用対象と成り得ます。
リスト項目要素
CSSでdisplay : list-item ;が指定されているコンテンツのためのブロックボックス（主要ブロックボックス）ともうひとつ別にリスト項目用のインラインボックスを形成する要素のことを指す。
HTML4.01, XHTML1.0, XHTML1.1ではli要素がこれに該当し、デフォルトでdisplay : list-item ;が指定されており、リスト項目用のインラインボックスの表示はリスト関連プロパティで指定することができます。
ルート部の要素（html要素と body要素）
(X)HTML文書はすべて樹形図のような構造（木構造）になっており、そこには必ず、すべての内容を包含している html要素が存在します。そして、html要素は最大の親要素であることからルート要素と呼ばれます。さらにルート要素である html要素の第一の子要素が head要素と body要素です。head要素は文書に関する様々な情報を定義するものですが、表示に関わる文書そのものの内容すべては body要素に包含されます。このように html要素と body要素は文書全体の表示に関わることから、CSS においては例外処理が多く、ルート部として区分されます。
絶対位置決め・相対位置決めの要素
positionプロパティによって配置（"relative | absolute | fixed" のいずれか）を指定された要素のことを位置指定されている要素と呼び、その内の "absolute | fixed" のいずれかを指定された要素のことを絶対位置決め（absolute positioning）の要素と呼びます。これに対して、"relative" を指定された要素を相対位置決め（relative positioning）の要素とも呼びます。