7. もっと自由に要素を特定する class・id

目次

class属性

下の画像で、一番上のpだけを赤にしようと思っても、これでは全てのp要素が赤になってしまいます。

これを解決するには、一番上のpにclass属性を付けて、それについてCSSを指定する方法があります。
classとは簡単に言えば名前のようなもので、「この人だけにこれをあげる」といった感じで、対象を特定するために使います。


classで特定した要素をCSSで選択するには、「.(ドット)クラス名」とします。<p>や<img>などのタグの場合はタグ名のみを書けばよかったので、ここが大きく違いますね。

もちろん、class属性(後述のid属性も)はpタグに限らず他のタグにも使えます。

1つの要素に複数のclassを指定する

1つの要素には複数のクラスを指定できます。やり方は、クラス名同士をスペースで区切るだけです。

ブラウザでは、ちゃんと文字の色が赤になって、サイズも大きくなっています。


1つのCSSを複数の異なったclassに指定する

上の画像のように、CSSのクラス名をカンマ(,)で区切れば、redクラスとred2クラスの両方にCSSが適用されます。
ブラウザでは・・・↓↓


同じクラス名は複数使える

同じクラス名は複数使えるため、1つ前の例では、red2はredとしてしまってOKです。



id属性

id属性も対象を特定するために使うという点ではclassと同じですが、異なる点が2つあります。

1. idで特定した要素をCSSで選択するには、ドット(.)ではなくシャープ(#)を使います。

2. 同じid名は1つしか使えません。

classとid、どっちを使えばいい?

結論から言えば、1つしか使わないのが確実ならidを使いましょう。なぜなら、id属性は1つしかないため、どこかを修正するとなったときに、その場所がidだと分かれば該当箇所は1つだけだと安心できるからです。

複数使う場合や、もしかしたら複数使うかも、といった場合はclassにすればOKです。もしidで設定しておいて後でclassに変更したくなった時に、修正が面倒になります><