クラスで“狙って”飾る

p や h1 といったタグ名のセレクタは、同じタグをぜんぶまとめて変えます。でも「この段落だけ赤くしたい」「このボタンだけ目立たせたい」——そんな”狙い撃ち”がしたくなることがあります。そこで登場するのがクラスです。

タグ名だけだと「全部」になってしまう

たとえば p と書くと、ページ中の段落がすべて同じ見た目になります。

p {
  color: tomato;
}

これだと「ここの段落だけ」という細かい注文ができません。ぜんぶか、ゼロか。もう少し、狙いを絞りたいですよね。

目印をつけて、狙って飾る

そこで、飾りたいタグに class で目印（名前）をつけます。

<p class="note">ここだけ目立たせたい</p>
<p>ふつうの段落はそのまま</p>

そしてCSSでは、その名前の前に . をつけて指定します。

.note {
  color: tomato;
}

これで、class="note" をつけた段落だけが赤くなります。ほかの段落はそのまま。「この子だけ」という狙い撃ちができました。

実際に動かすと、こうです。同じ<p>でも、class="note"をつけた段落だけが赤くなります。

クラス名の決めかた

名前は自由——といっても、あとで困らないコツがいくつかあります。

• 半角英数字とハイフン（-）でつける（profile-card のように）
• 数字始まりにしない（1st-card はダメ、card-1 はOK）
• 見た目でなく役割で名づける（red-text より warning。あとで色を青に変えても、名前が嘘にならない）
• 大文字と小文字は区別される（Note と note は別物。ぜんぶ小文字にそろえるのが定番）

とくに3つめは大事な考え方。クラスは「どう見せたいか」ではなく「それが何なのか」で名づけると、長く使える名前になります。最初は「あとで読んで意味がわかる名前」を心がければ十分です。

クラスを2つ並べて、中の一部だけ狙う

クラスは1つずつ使うだけでなく、スペースで2つ並べると「この中にある、あのクラス」という狙い方もできます。

h1 .name {
  color: tomato;
}

これは「h1 の中にある、class="name" の部分だけ」を狙うという意味。h1と.nameのあいだのスペースが「その中の」をあらわす合図です。見出しぜんぶではなく、名前の文字だけを色づけたいときに役立ちます。

実際に動かすと、こうです。見出しの文字はそのままで、<span class="name">で囲んだ名前の部分だけが色づきます。

このレッスンのまとめ

1. タグ名のセレクタは「同じタグ全部」を変える
2. class="名前" で目印をつけ、CSSで .名前 と狙い撃ちできる
3. .（ドット）は CSSのセレクタ側だけにつける
4. h1 .name のようにスペースで並べると、「この中にあるあれ」を狙える