CSSマスターへの道「ボックスモデル」

1 人で 25 日間の CSS 特訓アドベントカレンダーに挑戦します。
コンテンツの内容は生成 AI と壁打ちをしてきました。以下の構成を考えています。

---

テーマ構成案：CSS 完全攻略の旅

大きく 4 つのフェーズに分けました。

1. 基礎とレイアウトの週 （土台を固める）
2. 装飾と表現の週 （見た目を極める）
3. 動きとインタラクションの週 （命を吹き込む）
4. モダン CSS と総合演習 （最新技術と実践）

---

Phase 1: レイアウトの構造理解 (Day 1 - 7)

まずは、要素を意図した通りに配置するための「土台」を固めます。

• Day 1: ボックスモデルの再確認
  • box-sizing の挙動の違いや、marginの相殺など、つまずきやすい基本仕様を検証します。
• Day 2: Flexbox (基礎)
  • ナビゲーションバーを題材に、justify-content や align-items の挙動を体に馴染ませます。
• Day 3: Flexbox (応用)
  • 聖杯レイアウト（ヘッダー・フッター・3カラム）をFlexboxのみで構築し、伸縮のプロパティを理解します。
• Day 4: CSS Grid (基礎)
  • 2次元レイアウトの基礎、Gridを使った均等配置を学びます。
• Day 5: CSS Grid (応用)
  • grid-template-areas を用い、直感的かつ複雑な雑誌風レイアウトを実装します。
• Day 6: レスポンシブデザイン
  • デバイス幅に応じて列数が変化するカードレイアウトを通じ、Media Queriesを復習します。
• Day 7: Position
  • absolute から sticky まで、配置プロパティの違いを明確にします。

Phase 2: 表現力の向上 (Day 8 - 14)

CSSだけでどこまでリッチな表現が可能か、デザインの引き出しを増やします。

• Day 8: 背景とグラデーション
  • 複数のグラデーションを重ね、複雑な模様や空の表現に挑戦します。
• Day 9: シャドウ
  • ニューモーフィズムやマテリアルデザインなど、影による奥行き表現を学びます。
• Day 10: ボーダーと角丸
  • 有機的な形状（Blob）などを border-radius だけで生成します。
• Day 11: テキスト装飾とWebフォント
  • Webフォントの導入や、文字に対する装飾（縁取り・グラデーション）を行います。
• Day 12: 疑似要素 (::before / ::after)
  • HTMLを汚さずに装飾を行う、疑似要素の活用法を習得します。
• Day 13: 画像加工 (object-fit / filter)
  • CSSフィルターを用いた画像編集や、トリミングの挙動を確認します。
• Day 14: クリップパス
  • 画像を多角形や星型など、自由な形状に切り抜く手法を学びます。

Phase 3: インタラクションと動き (Day 15 - 21)

静的なページに「時間」の概念を取り入れ、ユーザー体験を向上させます。

• Day 15: Transition
  • ボタンのホバーエフェクトなどを通じ、心地よいイージングを探求します。
• Day 16: Animation
  • ローディングスピナーなど、ループするアニメーションを作成します。
• Day 17: Transform (2D/3D)
  • カードが裏返るフリップアニメーションなどで、3次元的な変形を扱います。
• Day 18: 変数 (Custom Properties)
  • CSS変数を用いたダークモード実装など、保守性の高い設計を学びます。
• Day 19: スクロールスナップ
  • JSを使わずに、スワイプで吸着するスライダーUIを実装します。
• Day 20: モダンCSS (:has / :is / :where)
  • 親要素セレクタ :has() など、ロジカルな最新セレクタを試します。
• Day 21: コンテナクエリ
  • 画面幅ではなく「親要素の幅」に応じる、次世代のレスポンシブ対応を学びます。

Phase 4: 総合演習 (Day 22 - 25)

これまで学んだ技術を組み合わせ、一つの作品として仕上げていきます。

• Day 22: CSSアート
  • div 1つでアイコンなどを描画し、スタイルの限界に挑戦します。
• Day 23: 実践UIトレース
  • よくあるWebサイトのパーツを模写し、実装力を確認します。
• Day 24: インタラクティブな仕掛け
  • JSを使わないアコーディオンメニューなど、CSSのみでロジックを組みます。
• Day 25: クリスマスカード制作
  • 最終課題。アニメーション、レイアウト、装飾の全てを動員し、動くクリスマスカードを作成します。

---

この 25 日間が終わる頃には、CSS に対する苦手意識が消え、どんなデザインでも「あ、こう書けばいいな」と想像できるようになることを目標にしています。

それでは、早速 1 日目の内容です。

初日は、地味ですが 最も重要 と言っても過言ではない「ボックスモデル」の理解です。ここが曖昧だと、将来レイアウト崩れに悩まされることになります。

コードを書く準備（エディタや CodePen など）をして、始めていきましょう。

---

Day 1: すべての基礎「ボックスモデル」と「box-sizing」

🎯 本日の目標

1. box-sizing: border-box の重要性 を体感する。
2. CSS 初心者がつまずきやすい 「マージンの相殺（Margin Collapse）」 を理解する。

---

📝 ミッション内容

以下の 3 つのステップで CSS を記述し、挙動の違いを確認してください。

Step 1: デフォルトの挙動（content-box）を知る

• 幅 200px、高さ 100px、パディング 20px、ボーダー 10px のボックスを作ってください。
• 確認: ブラウザ上で表示される「実際の箱の横幅」は何 px になっていますか？（開発者ツールで確認してみましょう）

Step 2: 現代の常識（border-box）を知る

• Step 1 と同じボックスをもう一つ作り、今度は box-sizing: border-box; を指定してください。
• 確認: Step 1 のボックスと比べて、サイズはどう変わりましたか？なぜ変わったのでしょうか？

Step 3: マージンの相殺（Margin Collapse）

• 上下に並んだ 2 つの div 要素を作ってください。
• 上の要素には margin-bottom: 30px; を、下の要素には margin-top: 20px; を指定してください。
• 確認: 2 つの要素の間隔は「50px」になっていますか？それとも…？

---

💻 実装サンプル

まずは自分で書いてみて、詰まったら以下のコードを参考にしてください。

正解例

See the Pen Untitled by サカツ (@saka2jp) on CodePen.

---

🧠 解説と振り返り

実装できたら、以下の解説を読んで理解を深めてください。

1. content-box (Step 1)

   • 指定した width: 200px は「中身の幅」になります。
   • 実際の幅 = 200px (中身) + 40px (左右 padding) + 20px (左右 border) = 260px
   • これだと「200px の箱を作ったつもりなのに、入らない」という事故が起きます。

2. border-box (Step 2)

   • 指定した width: 200px は「ボーダーまで含めた幅」になります。
   • 実際の幅 = 200px (CSS が自動で中身の幅を計算して縮めてくれる)
   • 実務では、全要素に * { box-sizing: border-box; } を当てるのが定石です。

3. マージンの相殺 (Step 3)

   • ブロック要素が縦に並ぶとき、margin は足し算（30 + 20 = 50）されず、 「大きい方の値」が適用されます。
   • 答えは 30px になります。

---

なぜ、マージンの相殺（Margin Collapse）は起こるのか？

1. 直感的なイメージ：お互いの「縄張り」は重ねて OK

マージンを「壁」ではなく 「確保したいパーソナルスペース（縄張り）」 だと考えてみてください。

• 上の箱: 「俺の下には、最低でも 30px の空き地が必要だ」
• 下の箱: 「俺の上には、最低でも 20px の空き地が必要だ」

この 2 人が縦に並ぶ時、どうなるでしょうか？

もし 2 人の間の距離が 30px あれば…

• 上の箱: 「30px 空いてるな。よし、満足だ。」
• 下の箱: 「30px 空いてるな。俺は 20px あればいいから、十分すぎるくらいだ。満足だ。」

両方の要求を満たす最小限の距離は「30px」 になりますよね。
わざわざ 50px 離れなくても、お互いのスペース（余白）は 共有（重ねる）しても良い というのが、CSS の基本的なルールです。

これを専門用語で 「マージンの相殺（Margin Collapse）」 と呼びます。

2. 歴史的な背景：文章を読みやすくするため

「なぜそんな仕様にしたの？」というと、CSS が作られた当初、Web は「論文やドキュメントを表示するためのもの」だったからです。

例えば、ブログや Word で文章を書く時を想像してください。段落（<p>タグ）がいくつか続くとします。

• 段落 A（下マージン 20px）
• 段落 B（上マージン 20px / 下マージン 20px）
• 段落 C（上マージン 20px）

もしマージンが「足し算」されてしまうと、段落と段落の間だけ 40px になってしまい、やたらとスカスカな文章になってしまいます。一番上や一番下は 20px なのに、間だけ倍の広さになるのは変ですよね。

「段落がいくつ続いても、行間を一定（20px）に保ちたい」
この要望を叶えるために、「縦方向のマージンは重ねる」という仕様が生まれました。

まとめ

• ルール: 縦に並ぶブロック要素のマージンは、 「大きい方の数値」が採用される （足し算にはならない）。
• 例外（重要）: 実は、このルールが適用されるのは「通常の配置（block）」の時だけです。Flexbox や Grid でレイアウトした中身では、この相殺は起きず、素直に足し算（50px）になります。

---

おわりに

地味ですが、プロでもたまに「あれ？」となる基本中の基本でした。
次回は、現代 CSS レイアウトの主役 「Flexbox（基礎編）」 です。