CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説

CSSボックスモデルの基本概念

HTMLドキュメント内のすべての要素は、ブラウザによって長方形のボックスとして描画されます。このボックスの幅（width）、高さ（height）、パディング（padding）、マージン（margin）によって、要素そのものとその周囲に確保されるスペースが決定します。以下の図は、ボックスモデルの概念を示したものです。

CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説

出典：w3.org

コンテンツ（Content）

テキスト、画像、その他のメディアといった実際のデータが格納される領域です。widthプロパティとheightプロパティによって、このボックスの寸法を変更できます。

パディング（Padding）

コンテンツの外側の端から境界線までの間のスペースをパディングと呼びます。paddingプロパティでこの領域のサイズを調整でき、padding-leftやpadding-bottomなどの辺ごとの個別プロパティを使えば、カスタム間隔も柔軟に設定可能です。

ボーダー（Border）

パディングの外側の端からマージンの内側の端までの距離にあたる部分が、要素の境界線です。デフォルトではその幅は0に設定されており、borderプロパティを使用して境界線を定義します。また、特定の辺だけを個別にスタイルすることもできます。

マージン（Margin）

要素のボックスと、その周囲にある他の要素のボックスとの間のスペースをマージンと呼びます。ページの端と内容の間に設けられる「ページの余白」に似た概念です。マージンは色が透明で、パディングと似た性質を持ちますが、要素の境界線の外側の領域を確保する点が異なります。パディングと同様に、辺ごとに個別のマージンを定義することも可能です。

サンプルコード1

<!DOCTYPE html>
<html>
<head>
<style>
body * {
    outline: solid;
}
#demo {
    margin: auto;
    width: 50%;
    padding: 1em;
    border: 1px outset;
    display: flex;
    box-shadow: inset 0 0 15px mediumvioletred;
    box-sizing: border-box;
}
#demo div {
    padding: 2em;
    box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説

サンプルコード2

<!DOCTYPE html>
<html>
<head>
<style>
body * {
    outline: thin dotted;
}
#demo {
    margin: auto;
    width: 120px;
    height: 120px;
    padding: 1em;
    border: 1px outset;
    display: flex;
    box-shadow: inset 0 0 15px indianred;
}
#demo div {
    width: 40px;
    height: 40px;
}
div:nth-child(odd) {
    border: inset lightgreen;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}
div:nth-child(even) {
    border: inset lightblue;
    padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

CSSのボックスモデルとは？4つの構成要素と実装例をわかりやすく解説

  1. CSSボックスモデルとは？4つの領域の基本構造を実例付きで徹底解説

    CSSでは、HTMLドキュメント内のすべての要素が長方形の「ボックス」として扱われます。これがCSSにおける標準的なレイアウトの仕組みであり、必要に応じて自由にカスタマイズすることが可能です。要素の位置決めや、コンテンツ、そしてその周囲の要素との配置関係は、すべてこのボックスモデルに基づいて決定されます。 まずは、下の画像に示したボックスモデルの全体像から確認していきましょう。 出典：w3.org ボックスモデルを構成する4つの領域 1. Content（コンテンツ領域） テキスト・画像・動画など、実際に表示されるデータが占める領域です。widthプロパティとheightプロパティによって、

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro