CSSを書いたのに効かないときは？

セレクタのつづりがHTMLのタグ名と合っているか、コロン・セミコロン・波かっこの書き忘れがないかを確認しましょう。1か所の記号ミスで、それ以降の指定がまとめて効かなくなることもあります。

同じ指定を複数のセレクタにまとめて効かせられる？

できます。h1, h2のようにコンマで区切って並べると、1つの指定を複数のセレクタに同時に効かせられます。

タグ名のセレクタは小文字で書くのが基本です。あとで学ぶクラス名は大文字小文字が区別されるので、HTML側と完全に同じつづりで書きましょう。

CSSは「どこを」「どうする」をセットで書きます。この「どこを」を指す部分がセレクタです。まずは、この基本の形をまるごと1つ、体でおぼえてしまいましょう。

p {
  color: blue;
}

つまり「段落の文字を、青にする」と読めます。「どこを { 何を: どうする; }」という日本語に置きかえて読むと、急に意味が通ります。

さっきのp { color: blue; }を、ほんとうに動かすとこうなります。pと書いた1つの指定で、段落がぜんぶいっぺんに青くなります。

pをセレクタにするだけで、2つの段落が両方とも青く。1つ1つ塗らなくていいのが、セレクタの気持ちよさです。

「どこを」の指定は、HTMLで覚えたタグの名前がそのまま使えます。p と書けば段落ぜんぶ、h1 と書けば大見出しぜんぶ。同じ名前のタグを、まとめて一気に変えられます。

h1 {
  color: red;
}

これで、ページ中の <h1> が全部あかくなります。1つ1つ手で塗らなくていい——これがCSSの気持ちよさです。

{ } の中には、指定を何行でも並べられます。1行につき1つ、最後は ; で閉じる。

p {
  color: blue;
  font-size: 18px;
}

「段落の文字を、青くして、少し大きくする」。上から順に、変えたいことを積み重ねていくイメージです。

「h1もh2も、同じ色にしたい」——そんなときは、セレクタをコンマで区切って並べます。

h1, h2 {
  color: teal;
}

これでh1とh2の両方が青緑になります。同じ指定を2回書かなくてすむぶん、書きまちがいも減る。「AとBを、まとめてこうする」と読んでください。

h1, h2と書いた1つの指定で、大見出しも中見出しもまとめて青緑に。名前を並べていない段落は、そのままの色で残ります。

もし同じセレクタに、ちがう値を2回書いたらどうなるでしょう。

p {
  color: blue;
}
p {
  color: red;
}

答えは赤です。CSSは上から順に読まれ、あとに書いた指定が前の指定を上書きします。「色を変えたはずなのに効かない」というとき、じつはファイルの下のほうに同じセレクタがもう1つあった——というのは、とてもよくあるつまずきです。

先に「青」と書いても、あとの「赤」が勝って赤い文字に。同じpへの指定は、下にあるほうが残ります。