1. ボックスモデル（Box Model）の構造

ブラウザがHTML要素をレンダリングする際、各要素は「ボックス」と呼ばれる矩形の領域として扱われます。このボックスは、内側から順に以下の4つの層で構成されています。

• コンテンツ（Content）: テキストや画像が表示される実際の領域。
• パディング（Padding）: コンテンツと境界線の間の余白。
• ボーダー（Border）: パディングの外側を囲む境界線。
• マージン（Margin）: 他の要素との間にある外側の余白。

ボックスサイズの計算例

標準的なボックスモデルでは、要素の全体の幅は width + padding + border で計算されます。

<style>
    .custom-box {
        width: 120px;
        height: 120px;
        padding: 15px;
        border: 5px solid #333;
        margin: 20px;
        background-color: #f0f0f0;
    }
</style>

<div class="custom-box">
    Box Model Test
</div>

この場合、要素が画面上で占める実際の幅は 120 (width) + 15*2 (padding) + 5*2 (border) = 160px となります（マージンを除く）。

box-sizing プロパティによる制御

レイアウト計算を簡略化するために、box-sizing プロパティを使用します。

• content-box (デフォルト): widthにpaddingやborderを含めません。計算が複雑になりがちです。
• border-box: widthにpaddingとborderを含めます。直感的なサイズ指定が可能です。

.modern-layout {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    /* 実際の幅は指定通り300pxになります */
}

2. CSSを利用した図形の描画

ボーダーの仕組みを利用して、画像を使わずに図形を作成できます。

三角形の作成

幅と高さを0にし、特定の方向以外のボーダーを透明（transparent）に設定します。

.arrow-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #ff4500;
}

ハート形の作成

疑似要素（:before, :after）と回転、角丸を組み合わせて作成します。

.shape-heart {
    position: relative;
    width: 100px;
    height: 90px;
}
.shape-heart::before,
.shape-heart::after {
    content: "";
    position: absolute;
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #e91e63;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.shape-heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

3. マージンの相殺（Margin Collapsing）

垂直方向に隣接する要素のマージンは、個別に適用されるのではなく、重なり合って一つにまとめられる現象を「マージンの相殺」と呼びます。

相殺が発生するケース

• 隣接する兄弟要素: 上の要素の margin-bottom と下の要素の margin-top が重なります。
• 親子要素: 親要素にボーダーやパディングがない場合、子要素のマージンが親要素の外側に飛び出します。

計算のルール

• 両方が正の値：大きい方の値が採用される。
• 両方が負の値：絶対値が大きい方の値が採用される。
• 正と負の値：両者の合計値になる。

4. インライン要素とブロックレベル要素

HTML要素には、表示上の振る舞いを決める基本的な形式があります。

ブロックレベル要素 (display: block)

<div>, <p>, <h1>, <ul> などが該当します。

• 常に新しい行から始まります。
• デフォルトで親要素の横幅いっぱいに広がります。
• 幅(width)や高さ(height)、上下のマージン・パディングが指定可能です。

インライン要素 (display: inline)

<span>, <a>, <strong> などが該当します。

• 行の一部として扱われ、改行されません。
• 幅や高さの指定は無効です。
• 上下のマージンは適用されません。

インラインブロック要素 (display: inline-block)

両者の特徴を兼ね備えた形式です。横に並びつつ、幅や高さの指定が可能です。

要素の非表示設定

要素を隠す方法は主に2つあります。

• display: none; 要素が最初から存在しないかのように扱われ、スペースも詰められます。
• visibility: hidden; 要素は見えなくなりますが、配置されていたスペースはそのまま残ります。

5. CSSリセットの重要性

ブラウザ（Chrome, Safari, Firefox, Edge等）はそれぞれ独自の「デフォルトスタイル（User Agent Stylesheet）」を持っています。これにより、同じHTMLでもブラウザごとに余白やフォントサイズが微妙に異なって表示されます。

この差異を解消するために、最初にすべてのスタイルをリセットまたは初期化するのが一般的です。

主要なリセット手法

• CSS Reset: margin や padding を一律 0 にリセットする強力な手法。
• Normalize.css: 有用なデフォルトスタイルを残しつつ、ブラウザ間のバグ修正に重点を置いた手法。

/* 簡易的なリセット例（実務では推奨されませんが、構造理解用） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}