Webサイト制作で欠かせないのが、CSSでスタイルを指定する際に使用するclass属性（クラス属性）です。
「なんとなく付けているけど、正しい使い方や命名方法まではわかっていない…」
「idとの違いは？詳細度（specificity）って何？」
という初心者〜中級者の悩みに答えるために、本記事では以下の内容を体系的に解説します。
- class属性の基本構文と使い方
- idとの違い・メリット
- プロが実践している命名ルール（kebab-case・BEMなど）
- CSSの詳細度（specificity）と優先順位
- よくある競合トラブルと解決策
この記事を読めば、CSSクラスの「なんとなく」から卒業し、保守性の高いCSS設計ができるようになります。
Contents
1. class属性とは？【HTMLとCSSをつなぐラベル】
class属性は、HTMLの要素に「名前」「役割」「グループ」を与えるための仕組みです。
複数の要素に同じ見た目を適用したいときに使います。
<p class="message">こんにちは！</p>
CSS側では .（ドット）を付けて指定します。
.message {
color: blue;
font-weight: bold;
}
1つのHTMLに対して、複数のclassをスペース区切りで付けることも可能です。
<p class="message large-text">こんにちは！</p>
2. class属性とid属性の違い
| class | id | |
|---|---|---|
| 用途 | 複数要素に使える | ページ内で1回だけ使える |
| CSS指定 | .title {} | #header {} |
| 優先順位（詳細度） | (0,0,1,0) | (0,1,0,0) |
| 使い分け | デザイン用・汎用 | ページ内リンク・JavaScript制御など |
結論：スタイル指定はclass中心、idは基本的に使わない方が保守しやすいです。
3. classを使うメリット
- 同じデザインを簡単に再利用できる
- HTMLとCSSの役割分担が明確になる
- メンテナンス・修正がしやすい
- 現場では「idよりclassが推奨される」理由にも直結します。
4. クラス名の命名ルール｜プロが守っているルール
4-1. 基本の書き方（必ず守りたいポイント）
| ルール | 例 |
|---|---|
| 英小文字＋ハイフン「-」で区切る | .main-title, .site-header |
| 数字はOK（ただし先頭不可） | .item-1, .section2 |
| 日本語や全角文字は使わない | ❌ .見出し, .ボタン |
| 意味のある名前にする | .btn, .card, .nav-link |
| 見た目ではなく「役割」で命名 | ❌ .red-text ✔ .error-message |
4-2. よく使われる命名パターン
| 用途 | よく使われるclass名例 |
|---|---|
| ボタン | .btn, .btn-primary, .btn-submit |
| セクション | .section, .section-about, .section-news |
| 見出し | .title, .page-title, .section-title |
| カードデザイン | .card, .card-item, .card-title |
4-3. BEM記法（中規模以上のサイトで必須）
BEM = Block（かたまり） / Element（要素） / Modifier（変化）
<div class="card card--highlight"> <p class="card__title">タイトル</p> <p class="card__text">本文テキスト</p> </div>
| 部分 | 役割 |
|---|---|
card | Block（コンポーネント本体） |
card__title | Element（中の要素） |
card--highlight | Modifier（バリエーション） |
5. CSSの詳細度（specificity）と優先順位を理解しよう
同じ要素に複数のCSSが当たる場合、どのスタイルが勝つかを決めるのが「詳細度（specificity）」です。
5-1. CSS詳細度の計算ルール
| セレクタの種類 | 詳細度（a,b,c,d） | 例 |
|---|---|---|
| インラインスタイル | 1,0,0,0 | <p style="color:red;"> |
| id | 0,1,0,0 | #main-title {} |
| class / 擬似クラス | 0,0,1,0 | .title, .btn:hover |
| 要素（タグ名） | 0,0,0,1 | p, h1 |
5-2. 実際の比較例
p {
color: gray; /* (0,0,0,1) */
}
.box p {
color: black; /* (0,0,1,1) */
}
#main p {
color: blue; /* (0,1,0,1) */
}
.menu:hover {
color: green; /* (0,0,2,0) */
}
ID > class > 要素 の順に強くなる。
5-3. !important は最終手段
.title {
color: red !important;
}
便利だけど乱用禁止！
→ 他のスタイルで上書きできなくなるため、保守が困難になります。
6. よくあるclassトラブルと回避方法
| トラブル例 | 原因 | 解決策 |
|---|---|---|
| CSSが反映されない | idの方が優先されている | classだけに統一する |
| スタイルが競合する | 詳細度の計算が曖昧 | セレクタを簡潔にする |
!important だらけ | 設計不足 | 命名・BEM・詳細度の理解で回避 |
7. まとめ｜classを正しく使うことがCSS設計の第一歩
- class属性は「スタイルのラベル付け」
- 命名ルールを守るとチーム開発でも崩れない
- 詳細度（specificity）を理解するとCSSトラブルが激減する
- BEMなどの設計思考を取り入れると、保守性が大幅に向上する