グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

スタイルシートでコーディングする時に、なんとなくいつも id と class の使い分けに迷ってしまいます。

そこで簡単にどう使い分けたらいいかを書いておこうと思います。
レイアウトを行うという点で考えるとこれだけでは分類しきれない場合も多いですが、参考にして下さい。

■id
「一意属性」とも呼ばれており、割り当てた値は唯一の名前を持つ事になります。
例えば料理のレシピを紹介しているサイトで「id="pasta"」や「id="cake"」とすることによって、それぞれが意味を持った情報の集まりになります。
要素に固有の値を持たせることがid属性の役割です。

■class
class属性は分類をあらわすもので、同じ意味を持つ意味を持つ情報をグループ化して明示する際に定義します。先ほどdivに「pasta」や「cake」と固有の値を定義したものは、それぞれにレシピに関する情報であるといえるので「class="recipe"」と定義することができます。