CSS ・ CSSの記法
.class
クラスセレクタ（グループを指定）
HTMLの class 属性の値に「.」を付けて、そのクラスを持つ要素をまとめて指定するセレクタです。スタイル指定の基本です。
01
サンプルコード
HTML
1<p class="badge">NEW</p>
2<p class="badge">人気</p>
3<p class="badge sale">SALE</p>
CSS
1.badge {
2 display: inline-block;
3 margin: 0 6px 0 0;
4 padding: 2px 10px;
5 border: 1px solid #b68235;
6 border-radius: 999px;
7 color: #7d5411;
8 font-size: 13px;
9}
10.sale {
11 background: #c0392b;
12 border-color: #c0392b;
13 color: #fff;
14}
02
実行結果
ブラウザでの表示
03
解説
クラスセレクタは、HTMLの class 属性の値の前に . を付けて書きます。class="badge" の要素なら .badge です。
同じクラスはページ内で何度でも使えるため、「同じ見た目にしたい要素のグループ」に名前を付ける感覚で使います。1つの要素に、空白で区切って複数のクラスを付けることもできます（class="badge sale"）。
詳細度がほどよく低く（≒10点）、上書きもしやすいため、スタイルの指定は基本的にクラスで行うのがおすすめです。
04
応用例・注意点
クラスの付け方・指定の仕方
| 書き方 | 説明 |
|---|---|
class="badge" | クラスを1つ付ける |
class="badge sale" | 複数のクラスを空白区切りで付ける |
.badge { } | そのクラスを持つ要素すべて |
.badge.sale { } | 両方のクラスを持つ要素だけ（間に空白を入れない） |
p.badge { } | p 要素で、かつ badge クラスを持つもの |
状態を表すクラスを付け外しする
is- で始まるクラスで状態を表し、JavaScript で付け外しするのが定番です。
HTML
1<li class="menu-item is-active">ホーム</li>
CSS
1.menu-item.is-active {
2 color: #b68235;
3 font-weight: bold;
4}
注意点
- 01クラス名は見た目（red、big）ではなく役割（badge、notice）で付けると、デザインを変えても名前を変えずに済みます。
- 02クラス名に . は含めません（HTMLでは class="badge"、CSSでは .badge）。
- 03.badge.sale（空白なし）と .badge .sale（空白あり）は意味が違います。空白ありは「子孫」の指定になります。