クラス
初級読み方：クラス｜英語：Class
複数の要素に同じ名前をつけられる属性で、CSSでは .クラス名 で指定するよ。いつ使う？ 同じスタイルを複数の要素に当てたいときに使う。例えば「赤いボタン」と「青いボタン」を作るとき、共通のスタイルを.btnクラスで、色だけ.btn-red/.btn-blueで分けるよ。間違いやすいポイント: HTMLではclass="btn"と書くのに、CSSでは.btn と書く（ドットが必要）。ドットを忘れるとスタイルが効かないよ。
やさしい説明
クラスとは、HTML要素にCSSのスタイルを当てるための「グループ名」です。
学校の「委員会」に例えるとわかりやすいです。「図書委員」というグループに属する人は全員同じ仕事をしますよね。クラスも同じで、同じクラス名をつけた要素は全員同じスタイルが適用されます。
1つの要素に複数のクラスをつけることもできます。スペースで区切って書きます。CSSでは .クラス名 で指定します。
具体例・使い方
<!-- HTML: 同じクラスを複数の要素に -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<!-- 複数クラスをつける -->
<div class="card featured">注目カード</div>
/* CSS */
.card { border: 1px solid #ccc; padding: 16px; }
.featured { border-color: gold; }いつ使う？
同じデザインを複数の要素に適用したいときに使います。カード、ボタン、ナビゲーション項目など、繰り返し使うスタイルはクラスで管理します。
間違いやすいポイント
❌ クラス名を数字で始める
/* ❌ 数字始まりはNG */
.1st-item { color: red; }
/* ✅ 英字かハイフンで始める */
.first-item { color: red; }よくある疑問
Q: クラスとIDの違いは？
A: クラスは複数の要素に使えますが、IDは1ページに1つだけです。基本的にはクラスを使いましょう。
Q: 1つの要素に複数のクラスをつけられる？
A: はい。class="btn btn-large red" のようにスペースで区切って複数指定できます。これがCSSの強力な使い方です。
Q: クラス名の付け方にルールはある？
A: 半角英数字とハイフン(-)を使うのが一般的です。数字で始めるのはNG。BEM記法（.block__element--modifier）という命名規則もよく使われます。
関連用語
📖 関連レッスン
レッスンを見る →