CSSで文字に色をつける

これからの演習にはタブが2つ出てくる。

• index.html … 中身（これまでどおり）
• style.css … 見た目のルール

上のタブで切りかえて書くよ。2つのファイルをつなぐ書き方は、あとの節でちゃんとやるから今は気にしなくて大丈夫。

h1 { color: red; } は3つの部分に分かれている。

• h1 … セレクタ（どこに当てるか）
• color … プロパティ（何を変えるか）
• red … 値（どう変えるか）

「h1 の 色 を 赤 にする」と読める。区切りは : と ; だよ。

記号のどれかが抜けると、そのルールはまるごと無視される。エラーも出ないので気づきにくいよ。

• プロパティと値の間は :（コロン）
• 1行の終わりは ;（セミコロン）
• ルール全体を { } で囲む

色が変わらないときは、まずこの3つを見よう。

red blue のような色の名前だけでなく、カラーコードでも書ける。# のあとに6桁。

赤・緑・青の強さを2桁ずつ並べた書き方で、名前のない微妙な色も指定できるよ。

セレクタに書いたタグ名の要素すべてにルールが当たる。li と書けば、リストの項目が全部同じ色になる。

さっそく style.css に書いてみよう。