ボックスモデルについて

現在地: Home » 初級ホームページ作成講座：目次 » ボックスモデルについて

ボックスモデルについて

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

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

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

要素内にブロック要素とインライン要素ともに記述可能: 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

ボックスモデルの概念

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

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

ボックスモデルサンプル

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

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

▲Top

HTMLタグ