適用要素 CSS 前提知識

CSS の各プロパティはすべての要素に適用できるとは限りません。そのプロパティを適用できる要素がブロック要素に限られているものやインライン要素に限られているものなど、CSS における (X)HTML の各要素はすべて以下の型（タイプ）に区分することができます。

ブロック要素・インライン要素・インラインブロック要素

ブロック要素・インライン要素・インラインブロック要素の比較

要素型（要素タイプ）がブロック要素に分類される要素は、次のような特徴をもっています。

要素型（要素タイプ）がインライン要素に分類される要素は、次のような特徴をもっています。

ブロック要素・インラインブロック要素とインライン要素におけるボックスの差
	ブロック要素・インラインブロック要素	インライン要素
高さ(height)	指定可	指定不可（置換インライン要素は指定可）
横幅(width)	指定可	指定不可（置換インライン要素は指定可）
左右のマージン(margin)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のパディング(padding)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
左右のボーダー(border)	要素の左右に存在	最初の文字の左側と、最後の文字の右側に存在
上下のマージン(margin)	要素の上下に存在	無視され、レイアウトに影響は無い
上下のパディング(padding)	要素の上下に存在	全ての行に存在し、ボーダーの位置に影響が出る
上下のボーダー(border)	要素の上下に存在	各行に存在するが、他の行に重なる場合がある

置換要素

置換要素とはインライン要素の中でも当該要素の属性に入力される値などによって内容が置き換えられ、その寸法（サイズ）で認識される要素のことを指します。具体的には img要素, input要素, object要素, select要素, textarea要素の5つがあります。

非置換インライン要素

非置換インライン要素とは置換要素（img要素, input要素, object要素, select要素, textarea要素）ではないインライン要素のことを指します。

表要素

ブロック要素の中でも table要素（display : table ;、または display : inline-table ;）は特定の要素のみを内包でき、表（テーブル）を生成するための要素であることから、それらの要素をまとめて表要素と呼びます。表要素は、表を定義する table要素（display : table ;、または display : inline-table ;）の中でそれぞれ次のように分類されます。

なお、border-collapseプロパティによる表示モデルが結合ボーダーモデルと分離ボーダーモデルとで以下の差異があります。

リスト要素

ブロック要素の中でも dir要素, dl要素, menu要素, ol要素, ul要素は特定の要素のみを内包でき、リストを生成するための要素であることから、それらの要素をまとめてリスト要素と呼びます。さらにリストの中の各項目部分を構成する要素をリスト項目要素と呼び、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）の要素とも呼びます。