IDとClassの違い

筆者は、約2年前にHTMLとCSSについて技術や知識を付け始めました。
色々と知識をつけていく中で、「IDとClass」の違いだけ理解できませんでした。理解できるようになったのは、
最近の話です。そんなIDとClassの違いについて簡単にまとめてみました。

IDの場合

<h1 id="red"></h1>

h1#red { color:red; }

Classの場合

<h1 class="red"></h1>

h1.red { color:red; }

IDとClassは基本的に作る人が使い分けるということだけ覚えて下さい。
理由としては、上記の2つの手法どちらを使っても、文字色を赤色にすることができます。

それでは、IDとClassをどのように使い分けていけばいいのでしょうか？

IDとClassの使い方

IDを使う場合

• 要素に名前をつけるときに使うもの

ヘッダーやフッター、コンテンツなどページ内で、基本的に1度しか登場しないものに対して適用させます。

例えば…こんなコードがあるとします。

<div id="wrapper">
   <header id="head"></header>
   <div id="content"></div>
</div>

基本的に、IDは同じページ内に1回だけしか使いません。
ID=”"この中はあくまでIDの名前を指定しているだけなので、指定をしてあげれば、
表示することは可能です！

Classを使う場合

• ページ内に何度も登場させたいときに使うもの

<div class="content red bold"></div>

.content {
width:200px;
height:300px;
background:#fff;
}

.red { color: red;}
.bold { font-weight: bold;}

ここでは、「コンテント」というボックスの中のフォントカラーを赤色に、文字を太くするという
スタイルの意味があります。
IDと違ってClassでは、class=”"の中に何度も登場させることができます。なので、contentのフォントカラーを
赤色から黄色に変えたい時でもこのように書くだけで変化します。

赤色

<div class="content red bold"></div>

黄色

<div class="content yellow bold"></div>

番外編：IDとClassの驚きの使い方

上記の説明では、IDとClassを使い分けよう！というお話をしました。
しかし、HTML上ではIDとClassを一緒に使う事が出来ます。

<div id="content" class="red bold"></div>

このような表記の仕方は滅多にしませんが、このようなことも可能になります。