クラスを使うと、HTMLの要素に「名前」をつけて、CSSでまとめてスタイルを当てることができます。
1.class属性の基本
HTMLのタグに class をつけることで、「この要素だけ特別」という指定がしやすくなります。以下のように多くのp要素が使われている中で、このp要素のみといった特別性です。
<p class="message">こんにちは！</p>
このように書くと、CSSでは以下のように指定できます
.message {
color: blue;
}
ポイント：CSSでは「ドット（.）」を使って class名を指定します。
2. なぜ class を使うの？
| 理由 | 説明 |
|---|---|
| ✔ 同じデザインをまとめられる | 複数のタグに同じスタイルを当てられる |
| ✔ デザインの管理がしやすい | HTMLとCSSが分離されて見やすくなる |
| ✔ 名前で意味を持たせられる | .title や .btn のように役割が明確になる |
3. よくある class名の例
<div class="box">囲みボックス</div> <h2 class="title">見出し</h2> <p class="text">本文テキスト</p>
.box {
border: 1px solid #ccc;
padding: 1rem;
}
.title {
font-size: 1.5rem;
color: #333;
}
.text {
line-height: 1.8;
}
クラス名の付け方・命名のルール
クラス名は、自由につけられますが、わかりやすく・統一されたルールでつけることがとても大切です。
基本ルール（これだけは守ろう！）
| ルール | 例 | 解説 |
|---|---|---|
| 英小文字とハイフンを使う | .main-title, .btn-primary | ハイフンで単語を区切ると読みやすい |
| 数字は最後や途中でもOK | .item-1, .section-2 | ただし先頭は数字NG |
| 意味のある名前をつける | .title, .card, .menu-link | 役割がわかるようにする |
| 英語をベースに統一する | （例：text, image, footer） | 漢字や日本語は避ける（エラーにはならないが管理しづらい） |
よくあるパターン
| 用途 | 命名例 |
|---|---|
| 見出し | .title, .headline |
| ボタン | .btn, .btn-submit |
| セクション | .section, .section-about |
| カード型ボックス | .card, .card-item, .card-title |
応用：BEM記法（クラス設計を整理するルール）
BEMとは「Block（かたまり）・Element（要素）・Modifier（変化）」の略で、
大きなサイトやチーム制作ではこのようなルールで書くこともあります。
<div class="card card--highlight"> <p class="card__title">タイトル</p> <p class="card__text">本文です。</p> </div>
card… ブロック（かたまり）.card__title… 要素（__でつなぐ）.card--highlight… バリエーション（–で変化を表す）
こちらは、CSS-class設計で詳しくトレーニングしていきます。
classの詳細度（セレクタの強さ）とは？
CSSでは、同じ要素に複数のスタイルがあたる場合、「どの指定が強いか（優先されるか）」が重要になります。
これを 「詳細度（specificity）」 と呼び、点数のように数値化して比較できます。
詳細度（specificity）の基本ルール
CSSでは、どのスタイルが優先されるかは「詳細度（specificity）」というルールで決まります。
これは点数で決まるのではなく、4段階の桁を使って比較されます。
詳細度の構造（4つの桁）
| セレクタの種類 | 桁（a,b,c,d） | 例 |
|---|---|---|
| インラインスタイル | a（最上位） | <p style="color:red;"> → (1,0,0,0) |
| IDセレクタ | b | #main-title → (0,1,0,0) |
| class / 属性 / 擬クラス | c | .box, [type=text], :hover → (0,0,1,0) |
| 要素 / 擬要素 | d（最下位） | p, h1, ::before → (0,0,0,1) |
左の桁（a → b → c → d）から順に大きいほうが優先されます。
例で比べよう！
/* ① 要素だけ → 最も弱い */
p {
color: gray; /* (0,0,0,1) */
}
/* ② class + 要素 → よく使う基本形 */
.box p {
color: black; /* (0,0,1,1) */
}
/* ③ ID + 要素 → 強め */
#main p {
color: blue; /* (0,1,0,1) */
}
/* ④ 擬クラス + class → classと同じレベルの桁にカウントされる */
.menu:hover {
color: green; /* (0,0,2,0) */
}
/* ⑤ classを複数 → 足し算される */
.card.highlight p {
color: orange; /* (0,0,2,1) */
}
/* ⑥ ID + class + 要素 → 最も優先される例 */
#header .nav-item a {
color: purple; /* (0,1,1,1) */
}
詳細度が高いスタイルほど、優先されて適用されます。
注意：!important との違い
p {
color: gray !important; /* 無理やり適用（おすすめしません） */
}
!important を使うと、詳細度よりも強制的に優先されます。
ただし、トラブルの原因になりやすいため、安易な使用は避けましょう。
ポイントまとめ
- 同じ要素に複数のスタイルが当たっている場合、詳細度が大きいセレクタが勝ちます
- 複雑に見えても、「IDが最強 → classが中間 → 要素が最弱」の基本構造を理解すればOK
- 擬クラス（
:hoverや:first-child）も classと同じ桁（c） に入る点に注意！
実際の設計では…
- よく使うのは
(0,0,1,1)や(0,0,2,1)あたり（class中心設計） (0,1,0,1)や(1,0,0,0)のような強すぎる指定（IDやインライン）は局所的に使う