CSSのボックスモデルとは？わかりやすく解説
すべてのHTML要素はボックスと見なすことができます。
CSS ボックスモデル
CSSでは、デザインとレイアウトについて話すときに「ボックスモデル」という用語が使用されます。
CSSボックスモデルは基本的に、すべてのHTML要素を囲むボックスです。マージン、ボーダー、パディング、および実際のコンテンツで構成されます。以下の画像は、ボックスモデルを示しています。
各パーツの説明:
- コンテンツ- テキストと画像が表示されるボックスのコンテンツ
- パディング- コンテンツの周囲をクリアします。パディングは透明です
- 境界線- パディングとコンテンツを囲むボーダー
- マージン- 境界外のエリアをクリアします。マージンは透明
ボックスモデルを使用すると、要素の周囲に境界線を追加したり、要素間のスペースを定義したりできます。
例
ボックスモデルのデモンストレーション:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
要素の幅と高さ
すべてのブラウザーで要素の幅と高さを正しく設定するには、ボックスモデルがどのように機能するかを知る必要があります。
重要：CSSを使用して要素の幅と高さのプロパティを設定する場合は、コンテンツ領域の幅と高さを設定するだけです。要素のフルサイズを計算するには、パディング、境界線、マージンも追加する必要があります。
例
この<div>要素の合計幅は350ピクセルになります。
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
計算は次のとおりです。
要素の幅の合計は、次のように計算する必要があります。
要素の合計幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー + 左余白 + 右余白
要素の高さの合計は、次のように計算する必要があります。
要素の高さの合計 = 高さ + 上部パディング + 下部パディング + 上部ボーダー + 下部ボーダー + 上部余白 + 下部余白
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。