HTMLとCSSにおけるidとclassの違いと使いどころ

2024-09-19

HTMLとCSSにおいて、id属性とclass属性は要素を識別するための重要なツールです。両者は似ていますが、使いどころが異なります。

唯一性: 一つのHTML文書内で、id属性の値は必ずユニークである必要があります。つまり、同じid値を持つ要素は複数存在することはできません。
特定の要素へのスタイル適用: id属性は、特定の要素に対してスタイルを適用する際に使用されます。例えば、ページ内の特定のセクションを強調したい場合、そのセクションの要素に固有のidを割り当てて、CSSでそのidに合わせたスタイルを定義します。

例:

<div id="hero-section">
  </div>

#hero-section {
  background-color: blue;
  color: white;
}

複数の要素へのスタイル適用: class属性は、複数の要素に同じスタイルを適用したい場合に使用されます。同じclass値を持つ要素は複数存在することができます。
スタイルのグループ化: class属性を使用して要素をグループ化し、共通のスタイルを定義することができます。例えば、ページ内のすべての段落に同じフォントや色を適用したい場合、それらの段落に同じclassを割り当てて、そのclassに合わせたスタイルを定義します。

<p class="paragraph">段落1</p>
<p class="paragraph">段落2</p>

.paragraph {
  font-family: Arial, sans-serif;
  color: black;
}

HTML:

<div id="hero-section">
  <h1>Welcome to our website</h1>
  <p>This is the main hero section.</p>
</div>

CSS:

#hero-section {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 50px;
}

この例では、id="hero-section"が割り当てられた<div>要素に対して、CSSで固有のスタイルを定義しています。このスタイルは、ページ内の他の要素には適用されません。

<p class="paragraph">This is the first paragraph.</p>
<p class="paragraph">This is the second paragraph.</p>

.paragraph {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}

この例では、class="paragraph"が割り当てられた<p>要素に対して、共通のスタイルを定義しています。このスタイルは、同じclassを持つ他の要素にも適用されます。

idとclassの代替方法

HTMLとCSSにおいて、idとclassは要素を識別するための重要なツールですが、これら以外の方法も存在します。

要素の状態や位置に基づいて選択: :hover, :active, :focus, :first-childなどの擬似クラスを使用して、要素の状態や位置に応じてスタイルを適用できます。
例:
```
a:hover {
  color: blue;
}
```
この例では、マウスポインタがホバーしているときに<a>要素の色を青に変更します。