セレクタのきほん

CSS は 3 つの部品でできている

前回書いた 1 つのかたまりを、もういちど見てみます。

このかたまりをルールと呼びます。ルールは 3 つの部品でできています。まず body の部分がセレクタで、どの要素にあてるかを指定します。次に background-color がプロパティで、何を変えるかをあらわします。最後の #f7f5f0 が値で、どう変えるかを決めます。

プロパティと値のあいだは半角のコロン、1 行の終わりはセミコロンで区切ります。セミコロンを忘れると、その先のルールごと効かなくなります。

タグ名で選ぶ

いちばん基本のセレクタが要素セレクタです。タグ名をそのまま書くと、ページの中のそのタグ全部が対象になります。h2 と書けば、6 つあるセクション見出しがまとめて変わります。

color は文字そのものの色を変えるプロパティです。background-color が背景だったのに対して、こちらは文字の色を変えます。名前が似ているので取りちがえに気をつけましょう。

同じ調子で h1 と h2 と h3 に濃紺、a にはリンクらしい青をあてて、ページ全体の印象をそろえます。

1. h1 と h2 と h3 に color を書いて濃紺にする
2. a に color を書いてリンクの色を決める