CSSのid、classの違いと使用方法について理解する

はじめに

CSSのisとClassの違いを学びなおしたので、idとClassについてまとめたいと思います。

idとClassの違い

CSSのid

id はHTML要素に対して一意であるべき識別子を付与するための属性です。つまり、一つしか指定できない属性ということになります。（idの複数指定も可能だが、推奨されていない。）
コードの例として示すと以下のようになります。この場合、headerという一意のidが付与されており、他の要素であるfooterやdivでの使用は複数指定になるため控えるべきです。

コード例

html

<div id="header">
  <!-- ヘッダー -->
</div>

css

#header {
  color: #333;
}

CSSのClass

class はHTML要素に対して複数のクラスを指定できる属性です。複数の要素で共通のスタイルを指定したい場合や多用したい場合はclassを使用します。
コードの例として示すと以下のようになります。

コード例

html

<h1 class="contents">コンテンツ1</h1>
<h2>これはコンテンツ1です。</h2>
 <!-- コンテンツ1 -->
<h1 class="contents">コンテンツ2</h2>
 <!-- コンテンツ2 -->

css

.contents {
  background-color: yellow;
}

まとめ

id は要素を一意に特定するための属性で、同じ id を複数指定することはできない。
class は複数の要素に同じクラスを指定でき、共通のスタイル指定などに有効。