CSS
クラス
初級読み方：クラス｜英語：Class
複数の要素に同じ名前をつけられる属性で、CSSでは .クラス名 で指定するよ。
やさしい説明
クラスとは、HTML要素にCSSのスタイルを当てるための「グループ名」です。
学校の「委員会」に例えるとわかりやすいです。「図書委員」というグループに属する人は全員同じ仕事をしますよね。クラスも同じで、同じクラス名をつけた要素は全員同じスタイルが適用されます。
1つの要素に複数のクラスをつけることもできます。スペースで区切って書きます。CSSでは .クラス名（ドット）で指定します。
具体例・使い方
<!-- HTML: 同じクラスを複数の要素に適用 -->
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<!-- 1つの要素に複数クラスをつける（スペース区切り） -->
<div class="card featured">注目カード</div>
<button class="btn btn-primary">送信</button>/* CSS: .クラス名（ドット）でスタイルを定義 */
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
/* 複数クラスの組み合わせ */
.featured {
border-color: gold;
background: #fffbeb;
}
.btn { padding: 8px 16px; border-radius: 4px; }
.btn-primary { background: blue; color: white; }JavaScriptでのクラス操作
const card = document.querySelector(".card");
// クラスを追加
card.classList.add("active");
// クラスを削除
card.classList.remove("hidden");
// クラスの有無を切り替え（toggle）
card.classList.toggle("expanded");
// クラスが含まれているか確認
card.classList.contains("active"); // true or falseclassList を使うとJavaScriptからクラスを動的に追加・削除できます。モーダルの開閉やタブ切り替えなど、インタラクションの実装によく使われます。
いつ使う？
- 同じデザインを複数の要素に適用したいとき（カード、ボタン、バッジなど）
- 状態によってスタイルを切り替えたいとき（
.active、.hidden、.error） - コンポーネントのバリエーションを作るとき（
.btn-primary、.btn-danger） - JavaScriptでスタイルを動的に変えたいとき（classList.toggle）
間違いやすいポイント
❌ クラス名を数字で始める
CSS のクラス名は数字で始めることができません。英字・ハイフン・アンダースコアで始める必要があります。
/* ❌ 数字始まりはNG */
.1st-item { color: red; }
/* ✅ 英字かハイフンで始める */
.first-item { color: red; }
.item-1 { color: red; } /* ハイフン後の数字はOK */❌ スタイルにidを多用する
idセレクタ（#名前）はclassより詳細度が高いため上書きしにくくなります。スタイル指定は原則classで行いましょう。
よくある疑問
Q: クラスとIDの違いは？
A: クラスは複数の要素に使えますが、IDは1ページに1つだけです。基本的にはクラスを使いましょう。
Q: 1つの要素に複数のクラスをつけられる？
A: はい。class="btn btn-large red" のようにスペースで区切って複数指定できます。これがCSSの強力な使い方です。
Q: クラス名の付け方にルールはある？
A: 半角英数字とハイフン(-)を使うのが一般的です。数字で始めるのはNG。BEM記法（.block__element--modifier）という命名規則もよく使われます。
関連用語
📖 関連レッスン
レッスンを見る →