コーススケジュール
CSS ボックス モデル
すべての HTML 要素はボックスとみなすことができます。 CSS では、デザインとレイアウトについて話すときに「ボックス モデル」または「ボックス モデル」という用語が使用されます。
CSS ボックス モデルは基本的に、各 HTML 要素を囲むボックスです。 これには、マージン、ボーダー、パディング、および実際のコンテンツが含まれます。 次の図は、ボックス モデルを示しています。
さまざまなセクションの説明:
- コンテンツ - テキストと画像が表示されるボックスのコンテンツ。
- パディング - コンテンツの周囲の領域をクリアします。 中綿は透明です。
- 境界線 - パディングとコンテンツの周囲の境界線。
- マージン - 境界線の外側の領域をクリアします。 余白は透明です。
ボックス モデルを使用すると、要素の周囲に境界線を追加し、要素間のスペースを定義できます。
要素のボックスの最も内側の部分が実際のコンテンツであり、そのすぐ周囲のコンテンツがパディングです。 パディングは要素の背景をレンダリングします。 パディングの端が境界線です。 境界線の外側はマージンであり、マージンはデフォルトで透明であるため、その背後にある要素が隠れることはありません。
ヒント: 背景は、コンテンツ、パディング、境界線で構成される領域に適用されます。
パディング、境界線、およびマージンはすべてオプションであり、デフォルト値はゼロです。 ただし、多くの要素には、ユーザー エージェント スタイル シートによって設定されたマージンとパディングが含まれます。 これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。 これは個別に行うことも、汎用セレクターを使用してすべての要素に設定することもできます。
* {
margin: 0;
padding: 0;
}
CSS では、幅と高さはコンテンツ領域の幅と高さを指します。 パディング、境界線、およびマージンを増やしても、コンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。
ボックスの余白が 10 ピクセルで、両側に 5 ピクセルのパディングがあると仮定します。 この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。以下の図を参照してください。
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
ヒント: パディング、境界線、マージンは、要素のすべての辺に適用することも、個々の辺に適用することもできます。
ヒント: マージンは負の値にすることができ、多くの場合、負のマージンを使用する必要があります。
例
デモボックスのモックアップ:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
要素の幅と高さ
すべてのブラウザで要素の幅と高さを正しく設定するには、ボックス モデルがどのように機能するかを理解する必要があります。
重要: CSS を使用して要素の幅と高さのプロパティを設定する場合、設定する必要があるのはコンテンツ領域の幅と高さだけです。 要素のフルサイズを計算するには、パディング、ボーダー、マージンも加算する必要があります。
例
<div> 要素の合計幅は 350px になります。
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
計算は次のとおりです。
320px (幅) 320px (幅) 320 像素（宽度） 320ピクセル（幅） 320 像素（宽度） + 20px (左 + 右パディング) + 10px (左 + 右の境界線) + 0px (左 + 右マージン) = 350 ピクセル
要素の合計幅は次のように計算する必要があります:
要素の合計幅 = 幅 + 左パディング + 右パディング + 左境界線 + 右境界線 + 左マージン + 右マージン
要素の合計の高さは次のように計算する必要があります:
要素の高さの合計 = 高さ + 上のパディング + 下のパディング + 上の境界線 + 下の境界線 + 上のマージン + 下のマージン