基本タグ講座|ボックスモデルについて

Loading

ブロックレベル要素とインラインレベル要素

タグ講座ではないのですが、各種タグとタグを装飾するスタイルシートは密接な関係があるので始めに解説します。正しいマークアップは勿論の事、タグ自体にも「ブロックレベル要素」と「インラインレベル要素」と言うボックス要素があり、スタイルシートは全ての要素は四角い領域であり、文章やイメージ画像などもその領域内にあると見ています。

ブロックレベル要素とはそれ自体がひとつのまとまりでタグを閉じれば次の入力データは自然に改行されます。以下はよく使用するブロックレベル要素の種類と特徴です。

要素内にブロック要素とインライン要素ともに記述可能
div  fieldset
要素内にブロック要素のみ記述できる
blockquote  form
要素内にインライン要素のみ記述できる
address  h  p  pre
要素内に特定の要素をもつ
ul  ol  dl  table

インラインレベル要素とはブロックレベル要素内で使用する要素です。インラインレベル要素の中にブロックレベル要素を記述する事は出来ません。

以下はよく使用するインラインレベル要素です。

よく使用するインラインレベル要素
a  abbr  br  button  cite  del  em  iframe  img  input  label
map  object  script  select  span  strong  textarea

Back To Top

ボックスモデルの概念

では、スタイルシート側からみたボックスについての説明です。

上記にて四角い要素と説明しましたが、もっと詳しく解説すると文章や画像などのデータ領域は外側から「margin/マージン(線から外側の余白)」「border/ボーダー(線)」「padding/パッディング(線から内側の余白/データ領域と線の間の余白)」と言う領域の中にあります。

ボックスモデルサンプル

スタイルシートで背景色及び背景画像の指定をする事がありますが、この場合「パディング領域」までが指定範囲になります。

また、詳しくは「レイアウトが崩れる原因」にて解説していますが、余白の指定とボーダーの指定をする際は注意が必要です。決して難しくはありませんが、スタイルシートで横幅や高さを指定する時はパディング/ボーダーは含まないと覚えておいて下さい。

Back To Top

スポンサードリンク

CSS.Design sample Home