CSS

CSSで使用するid属性とclass属性との違いと使い分け

id属性とclass属性の違いと使い分け

h2タグの中でもここだけとか、pタグの中でもここだけなど、CSSで部分的に装飾したいときに便利なid属性とclass属性ですが、id属性とclass属性には明確な違いがあります。

しっかり使い分けをしていないと、後々のメンテナンスなのでややこしいことになってしまいます。

ですから、最初からid属性とclass属性との違いを理解してサイト作りに取り組んでおくことをお勧めします。

id属性とclass属性との違い

id属性とclass属性との違いは主に以下の３点です。

id属性とclass俗世との違い
  1. ページ毎に使える回数
  2. 優先順位
  3. １つの要素に対し、指示できる個数

１つずつ見ていきましょう。

１．ページ毎に使える回数

id属性は各ページに１種類１回しか使用できません。それに対しclass属性は複数回使用することができます。

ダメな例

CSS

#red {
    color: red;
}

HTML

<p id="red">おはようございます</p>
<p>こんにちは</p>
<p id="red">こんばんは</p>

たとえば、３つの段落があり、１つ目と３つ目の文字を赤くしたいとします。そんなとき、同じid属性をページに２つ使うことはできません。

OKな例

CSS

.red {
    color: red;
}

HTML

<p class="red">おはようございます</p>
<p>こんにちは</p>
<p class="red">こんばんは</p>

class属性は各ページ毎に複数回使用できますから、上の例のようにすればOKです。

優先順位

HTML

<p id="red" class="blue">おはようございます</p>

CSS

#red {
    color: red;
}

.blue {
    color: blue;
}

この場合、「おはようございます」は赤色で表示されます。このように、id属性とclass属性で同じ要素に指示をした場合、いid属性の指示が優先されます。

１つの要素に対し、指示できる個数

class属性は、１つの要素に対して複数の指示を付与することができますが、id属性は１つの指示だけとなります。例として。「赤色」という装飾と「太字」という装飾を同時に付与する場合を考えてみます。

hTML

<p class="red b">おはようございます。</p>

CSS

.red {
    color: red;
}

.b {
    font-weight: bold;
}

上記のようにclass属性で、「赤色(red)」という指示と「太字(b)」という２つの指示を、半角スペースで区切って書く("red b")ことで同時に付与することができます。

id属性では上のような書き方はできません。

id属性とclass属性との使い分け

簡単にいうと、class属性は装飾用、id属性は特定の場所を指示する目印として使っていただければ間違いないと思います。例えばページ内リンクを作るときなどですね。

以前は、「ナビゲーション」や「サイドバー」「フッター」などにも使っていましたが、最近はHTMLタグが追加されました（「nav」「aside」「footer」）ので、id属性をつける必要はないと思います。

一言メモ

id属性やclass属性の名前についてですが、任意のもので構いません。例えば私の場合は赤色を「red」と書いていますが、「aka」などでもOKです。自分にわかりやすい名前を付けておくようにしましょう。

最後に

個人でサイトを作る場合でも、こういったid属性とclass属性の使い分けなどは、明確なルールを作っておいてあげると、後々のメンテナンスで苦労することがなくなります。厳密なルールとはいかないまでも、ある程度のルールは作っておくようにしましょう。

おすすめの記事