CSS フレームワークモデル

CSS フレームワークモデル

すべてのHTML要素は箱として考えることができます。CSSでは、デザインやレイアウトについて話すときに「ボックスモデル」または「フレームモデル」という用語を使用します。

CSS フレームモデルは、各 HTML 要素を囲む箱の実体です。これには、外余白、枠線、内余白、および実際の内容が含まれます。以下の図はフレームモデルを示しています：

CSS フレームワークモデル

各部分の説明：

  • 内容 - 枠の内容で、テキストや画像が表示されます。
  • 内余白 - 内容を囲む領域をクリアします。内余白は透明です。
  • 枠線 - 内余白と内容を囲む枠です。
  • 外余白 - 枠外の領域をクリアします。外余白は透明です。

フレームモデルは、要素の周りに枠を追加し、要素間のスペースを定義することを許可します。

要素ボックスの最も内側は実際の内容であり、内容を直接囲むのは内余白です。内余白は要素の背景を表示します。内余白の端は枠線です。枠線の外は外余白で、デフォルトでは透明であり、その後の要素を遮りません。

ヒント：背景は内容と内余白、枠線で構成されるエリアに適用されます。

内余白、枠線、および外余白はオプションです。デフォルト値は 0 ですが、多くの要素はユーザーエージェントのスタイルシートで外余白と内余白が設定されます。要素の margin と padding を 0 に設定することで、これらのブラウザのスタイルをオーバーライドできます。これはそれぞれのものを別々に行うことも、すべての要素に対してユニバーサルセレクタを使用することもできます：

* {
  margin: 0;
  padding: 0;
}

CSS では、width と height は内容エリアの幅と高さを指します。内余白、枠線、および外余白を増加させることで、内容エリアのサイズに影響を与えませんが、要素ボックスの全サイズを増加させます。

ボックスの各辺に 10ピクセルの外余白と 5ピクセルの内余白があると仮定します。この要素ボックスが 100ピクセルに達するようにするには、内容の幅を 70ピクセルに設定する必要があります。以下の図を参照してください：

CSS フレームワークモデルの例 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

ヒント：内余白、枠線、および外余白は、要素のすべての辺に適用することも、それぞれの辺にのみ適用することもできます。

ヒント：外余白は負の値でも可能で、多くの場合、負の値の外余白を使用します。

例

フレームモデルのデモ：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

自分で試してみる

要素の幅と高さ

すべてのブラウザで要素の幅と高さを正しく設定するには、フレームモデルがどのように動作するかを理解する必要があります。

重要な注意事項：CSS を使用して要素の width と height 属性を設定する場合、内容エリアの幅と高さのみを設定します。要素の完全なサイズを計算するには、内余白、枠線、および外余白も加算する必要があります。

例

<div> 要素の全幅は 350px になります：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

自分で試してみる

計算結果は以下の通りです：

320px(幅)
+ 20px（左+右インセット）
+ 10px（左+右ボーダー）
+ 0px（左+右外縁マージン）
= 350px

要素の総幅は以下のように計算されます：

要素の総幅 = 幅 + 左インセット + 右インセット + 左ボーダー + 右ボーダー + 左外縁マージン + 右外縁マージン

要素の総高さは以下のように計算されます：

要素の総高さ = 高さ + 上インセット + 下インセット + 上ボーダー + 下ボーダー + 上外縁マージン + 下外縁マージン