Webサイト制作の世界に足を踏み入れたばかりの皆さん、ようこそ。HTMLで骨組みを作り、CSSで彩りを添える。このプロセスこそが、Webデザインの最もエキサイティングな瞬間です。しかし、いざCSSを学び始めると「プロパティが多すぎる」「優先順位がわからない」といった壁にぶつかることも少なくありません。
本記事では、シニアWebデザイナーの視点から、CSSの基本から現場で必須となる考え方までを体系的に解説します。この記事を読み終える頃には、あなたは自信を持ってWebサイトのスタイルをコントロールできるようになっているはずです。
CSSとは何か？ HTMLとの決定的な違い
まず、CSS（Cascading Style Sheets）の役割を明確にしましょう。HTMLがWebページの「構造（文章や画像）」を定義するのに対し、CSSは「見た目（色、配置、フォントなど）」を定義します。
例えるなら、HTMLは建物の「設計図と柱」であり、CSSは「外壁の塗装やインテリア」です。CSSを使うことで、HTMLのコードを汚すことなく、Webサイトのデザインを一括管理することが可能になります。
CSSの基本的な書き方：セレクタと宣言ブロック
CSSの構文は非常にシンプルですが、正確な記述が求められます。基本ルールは以下の通りです。
セレクタ {
プロパティ: 値;
}
– **セレクタ**: どの要素に対してスタイルを適用するかを指定します（例：p, h1, .class名）。
– **プロパティ**: 何を変えるかを指定します（例：color, font-size, margin）。
– **値**: どのように変えるかを指定します（例：red, 16px, 20px）。
例えば、「段落（pタグ）の文字色を青にする」場合は、以下のように記述します。
p {
color: blue;
}
CSSをHTMLに適用する3つの方法
CSSを記述する場所には、主に3つのパターンがあります。
1. **外部スタイルシート（推奨）**: .cssファイルを作成し、HTMLの`
`内で読み込む方法です。サイト全体で共通のデザインを管理する場合に最適です。2. **内部スタイルシート**: HTMLファイルの``内に`