Go to information

適用要素

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

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

ブロック要素
displayプロパティで "block" の値が指定された要素
インライン要素
displayプロパティで "inline" の値が指定された要素
インラインブロック要素
displayプロパティで "inline-block" の値が指定された要素

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

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

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

ブロック要素・インラインブロック要素とインライン要素におけるボックスの差
ブロック要素・インラインブロック要素 インライン要素
高さ(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 ;)の中でそれぞれ次のように分類されます。

表のキャプション要素
caption要素
display : table-caption ;
表の列・列グループ要素
表の行・行グループ要素
表のセル要素
display : table-cell ;

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

リスト要素

ブロック要素の中でも dir要素, dl要素, menu要素, ol要素, ul要素 は特定の要素のみを内包でき、リストを生成するための要素であることから、それらの要素をまとめてリスト要素と呼びます。さらにリストの中の各項目部分を構成する要素をリスト項目要素と呼び、li要素、および displayプロパティで "list-item" の値を指定された要素がリスト項目要素にあたります。

dir要素
ディレクトリリストを作成する
li要素
dl要素
定義型リストを作成する
menu要素
メニューリストを作成する
li要素
ol要素
番号順リストを作成する
li要素
ul要素
箇条書きリストを作成する
li要素

ルート部(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)の要素とも呼びます。

現在位置
  1. W3G
  2. CSS
  3. 前提知識
  4. 適用要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2006-01-29T21:41:19+09:00
更新
2008-12-29T04:30:36+09:00
URI
http://w3g.jp/css/guide/target
検索