クラスで“狙って”飾る

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

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

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

p {
  color: tomato;
}

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

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

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

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

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

.note {
  color: tomato;
}

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

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

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

h1 .name {
  color: tomato;
}

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

このレッスンのまとめ

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

この.cardは、これからの章で枠線・角丸・影を足していく”しまちゃんの白いカード”のはじまりです。 :::