・余白を指定したのに思った位置にならない
・widthを指定したのに要素がはみ出す
・paddingやmarginの違いが分からない

これらの原因は、
ボックスモデルの理解不足です。

この記事では、
CSSの土台中の土台である
ボックスモデルを図がなくても理解できるレベル
まで整理します。

この記事で学べること

・ボックスモデルとは何か
・content / padding / border / margin の役割
・widthと高さの考え方
・よくあるレイアウト崩れの原因

ボックスモデルとは何か

CSSでは、
すべての要素は「四角い箱（ボックス）」として扱われます。

文字でも画像でも、
HTML上の要素はすべて
目に見えない箱を持っています。

この箱の構造を定義したものが、
ボックスモデルです。

ボックスモデルの4つの要素

1つのボックスは、
次の4つで構成されています。

・content（内容）
・padding（内側の余白）
・border（枠線）
・margin（外側の余白）

この順番は非常に重要です。

content（内容）

contentは、
文字や画像そのものが表示される領域です。

width や height を指定した場合、
基本的にはこの content のサイズを指定しています。

padding（内側の余白）

paddingは、
content と border の間の余白です。

・要素の中に余白を作りたい
・文字と枠線を離したい

といった場合に使います。

paddingを増やすと、
要素の「見た目の大きさ」は大きくなります。

border（枠線）

borderは、
要素の枠線です。

・線の太さ
・線の種類
・線の色

を指定できます。

borderも、
要素のサイズに影響します。

margin（外側の余白）

marginは、
要素の外側に作る余白です。

・要素同士の間隔を空けたい
・上下の距離を調整したい

ときに使います。

marginは、
自分自身のサイズではなく
周囲との距離を調整します。

width指定で混乱する理由

初心者が最も混乱するのが、
次の点です。

「widthを指定したのに、
思ったより大きくなる」

これは、
widthがcontentだけを指している
ことが原因です。

見た目のサイズは合計で決まる

要素の見た目の横幅は、
次の合計になります。

・content
・padding（左右）
・border（左右）

marginは含まれませんが、
周囲との距離として影響します。

この合計を意識しないと、
レイアウトは必ず崩れます。

box-sizingという考え方

この混乱を解消するために使われるのが、
box-sizing というプロパティです。

box-sizingを使うことで、
widthの考え方を変更できます。

box-sizing: border-box の考え方

この指定を使うと、

・width に padding と border を含める

という扱いになります。

現在のWeb制作では、
border-box を使うのがほぼ標準です。

なぜborder-boxがよく使われるのか

理由はシンプルです。

・指定した幅からはみ出しにくい
・レイアウト計算が直感的
・レスポンシブ対応が楽

そのため、
最初から全要素に適用する設計も
よく使われます。

marginとpaddingの使い分け

ここも重要なポイントです。

・padding
　要素の内側
　クリック範囲を広げたいとき

・margin
　要素の外側
　要素同士の間隔調整

迷ったら、
「どこに余白が欲しいか」
を言語化して考えましょう。

marginの上下が重なる現象

marginには、
上下方向が重なる特性があります。

これを
「マージンの相殺」
と呼びます。

上下の余白が思った通りにならない場合、
この仕様が原因であることが多いです。

ボックスモデルを理解すると何が変わるか

ここまで理解できると、

・余白調整が怖くなくなる
・レイアウト崩れの原因が分かる
・CSSを感覚で書かなくなる

CSSが
「試行錯誤」から「設計」
に変わります。

開発者ツールとセットで確認する

ボックスモデルは、
ブラウザの開発者ツールで
視覚的に確認できます。

・どこがcontentか
・どこにpaddingがあるか
・marginはどれくらいか

困ったら必ず確認しましょう。

初心者がよくやる間違い

よくあるミスです。

・marginとpaddingを適当に使う
・widthだけ見て全体サイズを考えない
・box-sizingを理解していない

これらは、
ボックスモデル理解で確実に解消できます。

まとめ

ボックスモデルは、
CSSレイアウトの基礎中の基礎です。

・すべての要素は箱
・content / padding / border / margin
・見た目サイズは合計で決まる

ここを理解できれば、
CSSは一気に扱いやすくなります。

次は、
要素の配置を制御するための基本プロパティ
に進みます。

次に読むべき記事

▶ 次の記事
4-5 レイアウトの基本（display / position）

▶ 関連記事
4-3 CSSセレクタの基本（class / id / 要素）

次に出てくる疑問は、ほぼ確実にこれです。

・CSSはどこに書けばいいのか
・HTMLの中？別ファイル？
・書き方が複数あって混乱する

CSSには、
大きく3つの書き方があります。

この記事では、
それぞれの書き方の特徴と使い分けを整理し、
「実務ではどれを使うべきか」まで明確にします。

この記事で学べること

・CSSの3つの書き方
・それぞれの特徴と違い
・メリット・デメリット
・実務での正しい選択基準

CSSの書き方は3種類ある

CSSには、次の3つの書き方があります。

・inline（インラインCSS）
・internal（内部CSS）
・external（外部CSS）

どれもCSSですが、
書く場所が違う という点が最大の違いです。

inline CSSとは何か

inline CSSは、
HTMLタグに直接CSSを書く方法です。

特徴としては、

・その要素だけに適用される
・HTMLとCSSが混ざる
・最も優先度が高い

という点があります。

inline CSSの特徴

inline CSSは、

・一時的な確認
・ごく小さな修正

には使えますが、
基本的には 常用しません。

理由は、
HTMLが非常に読みにくくなり、
管理が難しくなるためです。

internal CSSとは何か

internal CSSは、
HTMLファイル内にまとめてCSSを書く方法です。

HTMLの head 内に、
スタイルを記述します。

internal CSSの特徴

internal CSSの特徴は次のとおりです。

・1ページ内で完結する
・ファイルが増えない
・小規模なページに向いている

学習初期や、
1ページだけの簡単な検証では
使われることがあります。

external CSSとは何か

external CSSは、
CSSを別ファイルに分けて管理する方法です。

HTMLからは、
そのCSSファイルを読み込みます。

external CSSの特徴

external CSSには、
最も多くのメリットがあります。

・HTMLとCSSを完全に分離できる
・複数ページで使い回せる
・管理・保守がしやすい

そのため、
実務では基本的にこの方法が使われます。

3つの書き方の比較

ここで、
それぞれの違いを整理します。

・inline
　最優先で適用される
　管理しにくい

・internal
　1ページ完結
　規模が大きくなると不向き

・external
　再利用可能
　実務の標準

実務で使うのはどれか

結論は明確です。

実務では external CSS を使います。

inline や internal は、
理由がある場合にだけ使うものです。

初心者のうちから、
external CSSを前提に学習することで、
後から困ることがなくなります。

CSSの適用順序を知っておこう

CSSには、
どのスタイルが優先されるか
というルールがあります。

基本的な考え方は次のとおりです。

・後から指定されたものが優先される
・より具体的な指定が優先される
・inline が最も強い

この「優先順位」の理解は、
次の記事以降で詳しく扱います。

初心者がやりがちなミス

CSSの書き方で、
よくあるミスを整理します。

・どこに書いたCSSか分からなくなる
・inlineとexternalが混在する
・なぜ効いているか説明できない

これらを防ぐためにも、
CSSは1か所にまとめる
という意識が重要です。

学習段階でのおすすめ方針

学習中は、
次の方針をおすすめします。

・CSSは基本 external に書く
・1つのCSSファイルで管理する
・書いた場所を意識する

この習慣が、
実務レベルへの近道になります。

まとめ

CSSには、
3つの書き方があります。

・inline：一時的・例外的
・internal：小規模向け
・external：実務の標準

最初から
external CSSを前提に学習すること
が、最も効率的な進め方です。

次は、
CSSを書くうえで最重要とも言える
セレクタの考え方 に進みます。

次に読むべき記事

▶ 次の記事
4-3 CSSセレクタの基本（class / id / 要素）

▶ 関連記事
4-1 CSSとは何か｜HTMLとCSSの役割分担

しかし、
HTMLだけでページを作ると、
次のような状態になります。

・文字はすべて同じ見た目
・レイアウトが整っていない
・デザインがほとんどない

ここで登場するのが、
CSS（Cascading Style Sheets） です。

この記事では、
CSSとは何か
HTMLとCSSの役割分担
を中心に、CSS学習の土台となる考え方を整理します。

この記事で学べること

・CSSとは何か
・CSSが必要な理由
・HTMLとCSSの役割の違い
・CSS学習で最初に意識すべきポイント

CSSとは何か

CSSとは、
Webページの見た目を指定するための言語です。

CSSを使うことで、

・文字の色やサイズ
・余白や配置
・レイアウト構造

などを自由にコントロールできます。

HTMLが「構造」を作るのに対し、
CSSは 見た目とレイアウト を担当します。

なぜCSSが必要なのか

HTMLだけでも、
Webページは表示されます。

しかし、HTMLだけでは、

・読みづらい
・使いづらい
・デザイン性がない

という問題が出てきます。

CSSは、
情報を分かりやすく、使いやすく伝えるため
に欠かせない存在です。

HTMLとCSSの役割分担

Webページは、
主に次の2つで構成されています。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することが、
CSS学習の第一歩です。

HTMLの役割（おさらい）

HTMLは、

・見出し
・文章
・リンク
・フォーム

といった
ページの骨組み を作ります。

HTMLは、
「この部分は何か」を伝える言語です。

CSSの役割

CSSは、

・文字の大きさ
・色
・背景
・配置

など、
どう見せるか を指定します。

CSSは、
HTMLで作った構造に対して
「見た目のルール」を与える存在です。

CSSが分離されている理由

「HTMLに直接デザインを書けばいいのでは？」
と思うかもしれません。

しかし、
HTMLとCSSを分けることで、
次のメリットがあります。

・HTMLが読みやすくなる
・デザイン変更が簡単になる
・複数ページで使い回せる

これは、
保守性の高いWebサイト を作るための
重要な考え方です。

CSSはどこで使われるのか

CSSは、
次のような場所で使われます。

・個人ブログ
・企業サイト
・Webアプリケーション
・管理画面

見た目があるWebページには、
必ずCSSが使われていると言っても過言ではありません。

CSSは「後から」適用される

CSSは、
HTMLが読み込まれた後に適用されます。

そのため、

・同じHTMLでも
・CSSを変えるだけで

まったく違う見た目にすることが可能です。

この性質を理解しておくと、
CSSの考え方がぐっと楽になります。

初心者が最初につまずきやすい点

CSS学習の初期では、
次の点でつまずきやすくなります。

・CSSが効かない
・どこに書けばいいか分からない
・なぜ上書きされるのか分からない

これらは、
CSSの仕組みを理解することで
必ず解消できます。

これからCSSで学ぶこと

4章では、
次の内容を順番に学んでいきます。

・CSSの書き方
・セレクタの考え方
・レイアウトの基本
・よくある崩れの原因

「デザインセンス」ではなく、
ルールと仕組み を理解することが目的です。

まとめ

CSSは、
Webページの見た目を作るための言語です。

・HTML：構造と意味
・CSS：見た目と配置

この役割分担を理解することで、
HTMLとCSSを正しく組み合わせられるようになります。

次は、
CSSを実際にどこに、どう書くのか
という具体的な書き方に進みます。

次に読むべき記事

▶ 次の記事
4-2 CSSの書き方（inline / internal / external）

▶ 関連記事
3-7 HTMLフォーム送信の仕組みを理解する（GET / POST）