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」を使って個別に色を青に変更しています。
