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

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

CSSでは、HTMLドキュメント内のすべての要素が長方形の「ボックス」として扱われます。これがCSSにおける標準的なレイアウトの仕組みであり、必要に応じて自由にカスタマイズすることが可能です。要素の位置決めや、コンテンツ、そしてその周囲の要素との配置関係は、すべてこのボックスモデルに基づいて決定されます。

まずは、下の画像に示したボックスモデルの全体像から確認していきましょう。

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

出典：w3.org

ボックスモデルを構成する4つの領域

1. Content（コンテンツ領域）

テキスト・画像・動画など、実際に表示されるデータが占める領域です。widthプロパティとheightプロパティによって、この領域のサイズを制御します。

2. Padding（パディング）

コンテンツの外側の端からボーダー（境界線）までの内側の余白を指します。paddingプロパティで一括指定できるほか、padding-leftやpadding-bottomなど、辺ごとに個別のプロパティを使用すれば、柔軟な余白設計が可能です。

3. Border（ボーダー）

パディングの外側の端からマージンの内側の端までの領域が、要素の境界線にあたります。初期値の幅は0に設定されています。borderプロパティで線の太さ・種類・色を定義でき、上下左右それぞれの辺に異なるスタイルを適用することもできます。

4. Margin（マージン）

要素のボックスと、隣接する他の要素のボックスとの間に生まれる外側の余白です。書籍のページにおける「余白」に近いイメージで、色は常に透明です。パディングとよく似た性質を持ちますが、こちらは要素のボーダーの外側の空間を確保する点が異なります。パディングと同様に、辺ごとに個別のマージンを設定できます。

実装例：基本的なボックスモデル

それでは、実際のコードでボックスモデルの動きを確認してみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 25px;
    padding: 35px;
    width: 200px;
    background-color: lightseagreen;
    border: 20px dashed indianred;
}
</style>
</head>
<body>
<div>
Content demo box<br/>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のように表示されます。

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

ここでは、<div>要素のサイズをCSSで指定しています。この要素の合計幅は360pxになり、その計算過程は以下の通りです。

width + (左+右)padding + (左+右)border + (左+右)margin
= 200 + (35+35) + (20+20) + (25+25) px
= 360px

マージンとパディングは単なる「余白」に見えますが、レスポンシブデザインにおいて重要な役割を果たします。ボックスモデルを正しく理解すれば、要素を意図どおりの位置に精密に配置できるようになります。

実装例：box-shadowとborder-radiusを組み合わせた応用

次の例は、ネストした<div>要素に対してbox-shadowとborder-radiusを組み合わせたものです。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    padding: 35px;
    width: 80px;
    box-shadow: inset 0 0 22px indianred;
    border-radius: 50%;
}
div > div {
    padding: 0 0px 100px 0px;
    border-radius: 3%;
    box-shadow: inset 0 0 22px seagreen;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>

出力結果

表示結果は以下のようになります。

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

実装例：box-sizingによる幅の計算方法の違い

最後の例では、box-sizing: border-box を使用しています。この指定により、widthとheightにパディングとボーダーが含まれるため、パディングの有無にかかわらず要素の外寸が一定に保たれます。

<!DOCTYPE html>
<html>
<head>
<style>
#demo {
    width: 350px;
    display: flex;
    float: left;
    border: 6px solid black;
    border-radius: 6%;
}
.d1 {
    margin-left: 20px;
    width: 150px;
    height: 80px;
    box-shadow: 0 0 0 4px mediumslateblue;
    box-sizing: border-box;
    border-radius: 36%;
}
.d2 {
    width: 150px;
    height: 80px;
    padding: 30px;
    box-shadow: 0 0 0 4px darkred;
    box-sizing: border-box;
    border-radius: 36%;
}
</style>
</head>
<body>
<div id="demo">
<div class="d1"></div>
<div class="d2"></div>
</div>
</body>
</html>

出力結果

表示結果は以下の通りです。

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

box-sizing: border-box を指定すると、パディングを追加しても要素の外側のサイズが変わらないため、レイアウトを直感的かつ安定して管理できます。実務でも広く使われているテクニックなので、ぜひ覚えておきましょう。

  1. CSS3のFlexbox（フレックスボックス）レイアウトを徹底解説

    Flexboxとは？ CSS3には「Flexible Box」、通称Flexbox（フレックスボックス）と呼ばれるレイアウトモードが用意されています。Flexboxを活用することで、これまではfloatやpositioningなどのテクニックを駆使しなければ実現できなかった、複雑なWebアプリケーションやWebページのレイアウトを、シンプルな記述で簡単に構築できるようになります。 Flexboxは「フレックスコンテナ」と「フレックスアイテム」という2つの要素で構成されます。display: flex; を指定した要素がコンテナとなり、その直下の子要素が自動的にフレックスアイテムとして扱われます

  2. CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

    CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折