CSSの当て方とセレクタの基本 — どこに、何を指定するか

CSSのルールは、たった2つの部分でできています。「どこに当てるか（セレクタ）」と「何を指定するか（プロパティと値）」です。この形さえ分かれば、あとは語彙を増やしていくだけになります。

セレクタ {
  プロパティ: 値;
}

/* 実際に書くとこうなります */
h1 {
  color: #0f6fd1;
  font-size: 28px;
}

行の終わりのセミコロンを忘れると、その次の行が丸ごと効かなくなります。学び始めでいちばん多いつまずきなので、最初に頭の隅に置いておいてください。

CSSの書き場所は3つある

• 外部ファイル … style.css を作り、HTMLから link で読み込む。実務ではこれが基本
• style要素 … HTMLのhead内に <style> を書く。お試しや1ページ完結のときに
• style属性 … タグに直接書く。強力すぎて上書きしづらいので、原則使わない

<link rel="stylesheet" href="style.css" />

セレクタは、まずこの3つ

• タグ名 … p { } のように書く。そのタグ全部が対象になる
• class … .card { } のように、先頭にドットを付ける。同じ名札を何個でも使える
• id … #header { } のように、先頭にシャープを付ける。ページに1つだけ

実務でいちばん使うのは class です。id は「ページに1つだけ」という制約があるうえ、あとから上書きしづらいので、見た目の指定には class を使うのが無難です。

半角スペースは「その中の」という意味

セレクタをスペースでつなぐと、「左の中にある右」という意味になります。これを子孫セレクタと呼びます。

/* card の中にある p（スペースあり） */
.card p { color: red; }

/* card と price の両方が付いた要素（スペースなし） */
.card.price { color: blue; }

この2つは似て見えて、まったく別のものを指します。「効かない」と悩んだとき、スペースの有無を疑うと解決することがよくあります。

同じ場所に複数の指定が当たったら

• 強さが同じなら、あとに書いたほうが勝つ
• 強さは id > class > タグ名 の順に強い
• style属性で直接書いたものは、さらに強い（だから使わないほうがいい）

「書いたのに効かない」の多くは、この優先順位で別の指定に負けているケースです。切り分けの手順は、つまずき解決の記事にまとめてあります。