CSSで要素のデザインを変更するとき、「特定の要素だけデザインを変えたい！」 と思うことはありませんか？
例えば、サイトの見出しをすべて赤くしたいときや、ボタンのデザインを特定の1つだけ変更したいときなどです。
こういうときは、**クラス（class）** や **ID** を使うことで、自由にデザインをカスタマイズできます。
この記事では、クラスとIDの基本から、使い方、違い、優先順位 まで、初心者でも理解できるように詳しく解説していきます！
クラス（class）とIDとは？
まず、クラスとIDはどちらも「要素を指定するための目印」です。
しかし、役割に違いがあります。
- クラス（class）： 複数の要素に同じスタイルを適用できる
- ID： 1つの要素だけに適用する（ページ内で一意）
実際に試してみよう！
HTMLファイル（index.html）
次のHTMLでは、クラスとIDを使って異なるスタイルを適用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クラスとIDを使いこなそう！</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="main-title">これはIDで指定されたタイトルです</h1>
<p class="text-box">これはクラスで指定された段落です</p>
<p class="text-box">同じクラスを持つ別の段落です</p>
</body>
</html>id="main-title"、class="text-box"、class="text-box"部分が目印になっています。
次のCSSでこの目印にめがけて、いろいろとデザインの指定をしていきます。
CSSファイル（style.css）
以下のCSSを保存し、値を変えながら試してみてください。
#main-title {
color: red;
font-size: 24px;
}
.text-box {
color: blue;
font-size: 18px;
}どの部分を変更すれば何が変わる？
- ID（#main-title）: h1タグの色を赤にし、文字サイズを大きくする
- クラス（.text-box）: 2つの段落の色を青にし、文字サイズを変更する
クラスの書き方
クラスを使うと、複数の要素に同じスタイルを適用 できます。
クラスの指定方法（HTML）
<p class="highlight">この文章はクラスを適用しています。</p>クラスの指定方法（CSS）
.highlight {
background-color: yellow;
font-weight: bold;
}IDの書き方
IDを使うと、ページ内の特定の1つの要素にのみ適用 できます。
IDの指定方法（HTML）
<p id="unique-text">この文章はIDを適用しています。</p>IDの指定方法（CSS）
#unique-text {
color: green;
text-align: center;
}クラスとIDを組み合わせて使う
クラスとIDを組み合わせることで、より細かくデザインを調整できます。
HTMLとCSSの例
<p id="special-text" class="highlight">この文章はIDとクラスの両方が適用されています。</p>#special-text {
font-size: 20px;
}
.highlight {
background-color: yellow;
}クラスとIDの違い（優先順位）
CSSでは、同じ要素にクラスとIDが指定された場合、IDのスタイルが優先 されます。
例：クラスとIDの両方を指定した場合
#special-text {
color: red;
}
.highlight {
color: blue;
}この場合、ID（#special-text）のスタイルが優先され、文字色は赤になります。
問題集
Q1. 複数の要素に同じスタイルを適用するには？
- クラス（class）を使う
- IDを使う
- どちらも同じ
Q2. CSSでIDを指定するときの記号は？
- .
- #
- *
✅ 答え: Q1→1, Q2→2
まとめ
- クラス（class）は複数の要素に適用できる
- IDは1つの要素にのみ適用できる（ページ内で一意）
- クラスとIDは併用可能だが、IDのほうが優先される
- 1つのタグに複数のクラスを設定できる（例: class=”box highlight”）
コメントを残す