この記事でわかること
- CSSが何を担当する言語かを、HTMLとの役割分担で整理
- 基本構文「セレクター・プロパティ・値」の読み方と書き方
- 外部・内部・インラインの3つの書き方と使い分け
- レイアウトの土台になるボックスモデルとセレクターの基本
- 同じ要素にスタイルが重なったときの優先順位（詳細度）
結論を先に書きます
CSS（Cascading Style Sheets）は、Webページの見た目（デザイン）を定義する言語です。HTMLが「構造と内容」を担当するのに対し、CSSは色・フォント・レイアウト・余白といった「スタイル」を受け持ちます。
家にたとえると、HTMLが骨格と間取り、CSSが内装と壁紙です。HTMLだけでも文章は表示されますが、スタイルのない白黒のページになります。CSSを加えて初めて、見栄えのするWebページが完成します。
- CSSの役割は見た目の定義。中身はHTML、見せ方はCSSと分担する
- 基本構文は
セレクター { プロパティ: 値; }の1パターンだけ - 書き方は外部・内部・インラインの3つ。実務は外部スタイルシートが基本
- レイアウトの理解はボックスモデルと詳細度から始まる
CSSを学ぶ前に、土台となる構造側の知識を整理しておくと理解が早くなります。HTMLの全体像はHTMLとは？初心者向け解説でまとめています。
CSSとは何か：HTMLとの役割の違い
CSSは、HTMLで作った「構造」に対して見た目のルールを上書きしていく言語です。HTMLとCSSは別々の言語ですが、必ずセットで使います。
役割を分けて考えると、迷いにくくなります。「何を書くか」はHTML、「どう見せるか」はCSSです。たとえば見出しを大きく青くしたいとき、見出しという要素を作るのがHTML、大きさと色を決めるのがCSSになります。
<!-- HTML（構造・内容） --> <h1>こんにちは</h1> <p>CSSを学んでいます。</p> /* CSS（スタイル・見た目） */ h1 { color: #0066cc; font-size: 32px; } p { color: #333; line-height: 1.8; } この2つを組み合わせると、青くて大きな見出しと、読みやすい行間の本文が表示されます。構造と見た目を分けておくと、デザインを変えたいときにHTMLを触らずCSSだけ修正できる、というのが大きな利点です。
CSSの基本構文：セレクター・プロパティ・値
CSSの構文は、覚えることが少ないのが特徴です。基本の型は次の1パターンだけになります。
セレクター { プロパティ: 値; プロパティ: 値; } 3つの言葉の関係を表で整理します。
| 要素 | 説明 | 例 |
|---|---|---|
| セレクター | スタイルを適用する対象 | h1 p .class #id |
| プロパティ | 変更したいスタイルの種類 | color font-size margin |
| 値 | プロパティに設定する内容 | red 16px auto |
「どの要素に（セレクター）、何を（プロパティ）、どうするか（値）」という3点を書く、と考えると読み解きやすくなります。プロパティと値の間はコロン、行末はセミコロンで区切るのがルールです。
CSSの書き方3種類と使い分け
CSSをHTMLに適用する方法は3つあります。それぞれ向き不向きがあり、実務では外部スタイルシートが基本です。
- 外部スタイルシート（推奨・複数ページで使い回せる）
- 内部スタイルシート（1ページ限定のスタイル向け）
- インラインスタイル（特定要素に一時的に当てる用途のみ）
1. 外部スタイルシート（推奨）
CSSを別ファイル（style.css）に書き、HTMLからリンクで読み込む方法です。1つのCSSファイルを複数ページで共有できるため、管理しやすく修正も一括で反映できます。
<!-- HTMLのheadタグ内 --> <link rel="stylesheet" href="style.css"> /* style.css */ body { font-family: sans-serif; color: #333; } 2. 内部スタイルシート
HTMLファイルの 内に