CSSの基本 — セレクターとボックスモデル
このトピックを終えると
CSSがHTMLにどのようにスタイルを適用するかを理解し、セレクターを使って目的の要素を選択してデザインを変更できるようになります。
CSSはデザインを担当します
HTMLがウェブページの「骨格」であるなら、CSS（カスケーディング・スタイル・シート）は「衣服」です。色、サイズ、間隔、配置など、目に見えるすべてのデザインはCSSが担当します。
html
<!-- HTMLファイル内でCSSを適用する最も簡単な方法 -->
<style>
h1 {
color: navy;
font-size: 24px;
}
p {
color: #333;
line-height: 1.6;
}
</style>
<h1>タイトルです</h1>
<p>この段落にスタイルが適用されます。</p>h1 { ... } — これはCSSルールです。h1がセレクター（どの要素に？）、中括弧の中が宣言（どのようなスタイルを？）です。
セレクターの種類
CSSで最も重要な質問は、「どの要素を選択してスタイルを適用するか」です。これを決定するのがセレクターです。
css
/* タグセレクター — 該当するタグ全体 */
p { color: gray; }
/* クラスセレクター — ピリオド（.）で始まる、複数の要素で再利用 */
.highlight { background-color: yellow; }
/* IDセレクター — シャープ（#）で始まる、ページに1つのみ */
#main-title { font-size: 32px; }
/* 子孫セレクター — 特定の要素内の要素のみ */
.card p { font-size: 14px; }html
<h1 id="main-title">大きなタイトル</h1>
<p class="highlight">強調された段落</p>
<p>通常の段落</p>実務で最もよく使われるのはクラスセレクター（.）です。1つのスタイルを複数の要素で再利用できるためです。
ボックスモデル
ブラウザーはすべてのHTML要素を**ボックス（箱）**として扱います。このボックスは内側から4つの層で構成されます。
text
┌─────────────────────────── margin (外部間隔) ──┐
│ ┌──────────────────────── border (境界線) ───┐ │
│ │ ┌───────────────────── padding (内部間隔) │ │
│ │ │ │ │
│ │ │ content (実際のコンテンツ) │ │
│ │ │ │ │
│ │ └────────────────────────────────────────┘ │
│ └──────────────────────────────────────────────┘
└──────────────────────────────────────────────────┘css
.card {
width: 300px; /* content の幅 */
padding: 16px; /* コンテンツと境界線の間の間隔 */
border: 1px solid #ddd; /* 境界線 */
margin: 20px; /* 他の要素との間隔 */
}「widthを300pxに設定したのに、実際にはもっと広いのはなぜ？」 — paddingとborderが加算されるためです。これを防ぐには、box-sizing: border-box;を使用すると、paddingとborderがwidth内に含まれます。ほとんどすべてのプロジェクトでデフォルトに設定します。
→ バイオに適用：DevBench — HTML・CSS基礎