CSSのidとclassの使い方完全ガイド！初心者でもわかる使い分け
新人
「CSSで要素にスタイルを適用する方法って、idとclassの違いって何ですか？」
先輩
「idとclassは、HTMLの要素に特定のスタイルを適用するための方法です。それぞれ使い分けると、より効率的にデザインができますよ。」
新人
「具体的に、idとclassはどんな場面で使うんですか？」
先輩
「それでは、idとclassの違いと使い方について詳しく説明しますね。」
1. idとは？
idは、HTMLの各要素に一意に識別できる名前をつけるための属性です。つまり、1つのページ内でidはユニーク（唯一）でなければなりません。
例えば、ページ内で一つだけある特定の要素にスタイルを適用したい場合に使用します。idは、ページ内で一度だけ使われることが多いため、特定の要素にのみスタイルを適用する場合に非常に便利です。
以下の例では、h1タグにidを使ってスタイルを適用しています：
<style>
#title {
color: blue;
font-size: 24px;
}
</style>
<h1 id="title">これがタイトルです</h1>
このコードでは、h1タグにid「title」を設定し、そのidに対してスタイルを適用しています。idはユニークなので、このスタイルは他の要素には影響しません。
2. classとは？
classは、HTMLの要素に共通のスタイルを適用するための属性です。idとは異なり、同じclass名を複数の要素に付けることができます。これにより、複数の要素に同じスタイルを一度に適用することができます。
例えば、同じデザインを持つボタンや見出しがページ内に複数ある場合に、classを使って一括でスタイルを設定することができます。
以下のコードでは、複数のボタンにclassを使ってスタイルを適用しています：
<style>
.button {
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
</style>
<button class="button">ボタン1</button>
<button class="button">ボタン2</button>
<button class="button">ボタン3</button>
このコードでは、すべてのbuttonタグにclass「button」を設定し、共通のスタイルを適用しています。classは同じ名前を複数の要素に使えるため、同じデザインを持つ要素にスタイルを簡単に適用できます。
3. idとclassの違い
idは1つのページ内で一意でなければならないため、特定の要素にのみスタイルを適用する場合に使用します。classは、複数の要素に同じスタイルを適用したい場合に使用するため、同じ名前のclassを何度でも使うことができます。
以下は、idとclassの使い分けの例です：
- id: ページ内で一つだけの要素に対してスタイルを適用する時に使います。例えば、ページのタイトルや特定のセクションなどに使います。
- class: 複数の要素に同じスタイルを適用する時に使います。例えば、複数のボタンやリンクに同じデザインを適用する場合などです。
どちらを使うかは、目的やデザインによって選びましょう。
4. idとclassを同時に使う場合
一つのHTML要素にidとclassを同時に使うこともできます。この場合、idはユニークである必要があるため、classで共通のスタイルを設定し、idで個別のスタイルを設定することができます。
例えば、次のように、h2タグにidとclassを両方設定することができます：
<style>
.header {
font-size: 20px;
color: gray;
}
#specialHeader {
color: blue;
}
</style>
<h2 class="header" id="specialHeader">特別な見出し</h2>
このコードでは、class「header」を使って基本的なスタイルを設定し、id「specialHeader」を使って個別に色を青に変更しています。
5. CSSの優先順位（セレクタの強さ）を理解しよう
CSSでは、同じ要素に複数のスタイルが指定された場合、「どのスタイルを優先するか」というルールがあります。これを優先順位（詳細度）と呼びます。
基本的に、idはclassよりも優先順位が高く、後から書かれていなくても上書きされることがあります。
<style>
.text {
color: red;
}
#text {
color: blue;
}
</style>
<p class="text" id="text">この文字は何色？</p>
この場合、idの指定が優先されるため、文字は青色になります。優先順位を理解することで、思い通りのデザインがしやすくなります。
6. classを複数指定して使う方法
classは、1つの要素に対して複数指定することができます。これにより、スタイルを組み合わせて柔軟にデザインを適用することが可能になります。
<style>
.btn {
padding: 10px;
border-radius: 5px;
}
.primary {
background-color: blue;
color: white;
}
.large {
font-size: 20px;
}
</style>
<button class="btn primary large">大きなボタン</button>
このように、複数のclassを組み合わせることで、再利用性の高い効率的なスタイル設計ができます。
7. idとclassの命名ルールとポイント
idやclassの名前は自由に付けることができますが、わかりやすい名前を付けることが重要です。意味のある名前にすることで、コードの可読性が向上し、後から修正しやすくなります。
例えば、「red」のような見た目ベースではなく、「error」や「button-primary」など、役割に基づいた名前を付けるのがおすすめです。
<!-- 悪い例 -->
<p class="red">エラーメッセージ</p>
<!-- 良い例 -->
<p class="error">エラーメッセージ</p>
このように命名ルールを意識することで、チーム開発でも理解しやすいコードを書くことができます。
