class で名前をつける

01 / 05

タグ名だと全部いっしょに変わる

p { color: red; } と書くと、ページにある <p> 全部が赤くなる。

でも作りたいのは「ここの1つだけ赤い段落」だったりする。タグ名のセレクタだけでは、そこを狙えないんだ。

p {  color: red;}

02 / 05

そこで使うのが class 属性。要素に自分で決めた名前をつけられる。

href や src と同じように、開始タグの中に class="名前" と書くよ。

<p>ふつうのおしらせ</p><p class="alert">たいせつなおしらせ</p>

03 / 05

CSSでその名前を指すときは、前にドット . をつける。ここが最初に間違えるところだよ。

.alert {  color: #cc0000;}

04 / 05

同じ class はいくつの要素につけてもいい。ちがうタグにつけてもかまわない。

ルールは1つ書くだけで、名前がついている要素すべてに効く。あとから色を変えたいときも1か所直すだけですむよ。

<p class="point">ここが大事</p><li class="point">これも大事</li>

05 / 05

class="red" のように見た目で名前をつけると、あとで青に変えたときに名前がうそになる。

class="alert"（注意）class="point"（大事なところ）のように、役割で名前をつけよう。名前は自分で決められるけれど、決め方にはコツがあるんだ。