CSSの基本記述では、セレクタ部にHTMLの要素名を指定しますが、特定の要素ではなく一部だけに適用したい場合には、２つの記述方法があります。それが、「id」と「class」です。

どちらも属性ですが、ある特定の範囲にデザインを付けたい場合、その範囲に名前を付けて、その名前をセレクタに指定してデザインを適用できます。

下の図のサンプルコードを見てください。
見出しh1と最初の段落pをグループ化して、周りに青い線を引くような記述をしています。また、「2つ目の段落」のp要素内と署名のaddress要素内の文字をオレンジ色にしたい場合、どちらにも同じ名前を付けてあげることによって、デザインの指定が簡潔に記述できます。

このid属性とclass属性は明確に役割が異なりますので、使い分けをしっかりと覚えておく必要があります。

その前にこの2つの属性の使い方の例を紹介しましょう。

idとclassの記述例

ここでは、例としてp要素に名前を付けることを前提にします。

id属性を使ったスタイルの例

HTMLソースでは、p要素の開始タグ内にid属性を使って名前を付けます。

<p id="text">id属性を使って「text」という名前を付けた。</p>

CSSでは、定義した名前の前に「#」を付けて、デザインを指定します。

#text {color:blue;}

また、p要素の名前という書き方である「p#text {color:blue;}」でも構いません。この時、要素名と「#」は続けて書きますので、間に空白を入れないようにします。

class属性を使ったスタイルの例

HTMLソースでは、p要素の開始タグ内にclass属性を使って名前を付けます。

<p class="text">class属性を使って「text」という名前を付けた。</p>

CSSでは、定義した名前の前に「.」を付けて、デザインを指定します。

.text {color:blue;}

また、p要素の名前という書き方である「p.text {color:blue;}」でも構いません。この時、要素名と「.」は続けて書きますので、間に空白を入れないようにします。

親子関係の記述

例えば、下の図のような記述を下とします。h1とp要素をグループ化して、名前を「top」として定義しています。
この時、topグループ内のh1要素だけに文字色を青に指定したいときは、下のCSSのように記述します。

「div#top h1」および「#top h1」のどちらにしても#topとh1の間には半角空白を入れます。この理由は、このHTMLの構造を見るとh1要素はdivグループ名「top」の子要素となっています。記述の基本を説明すると、親要素、そして子要素というように上から順に記述する時は、親要素と子要素の間には半角の空白を挿入する必要があります。
「top」と言う名前はdiv要素自体の名前となります。つまり、親要素の名前となるので、その時は「div#top」というように間に空白を入れないで続けて記述します。「#top」と親要素名を省略することもできますが、なるべく親要素名から順に記述する方が良いとされています。

ただ、class属性を使って同じ名前を違う要素に定義することも多いです。異なる要素であっても同じ名前を定義した箇所に同一のデザインを適用する場合は、親要素名は記述しません。

idとclassの使い分け

基本的にはスタイルの適用にidを使うかclassを使うかの違いだけで、実際の表示効果は全く同じになります。
「id」と「class」の違いは次のようになります。

属性	同じ名前の頻度
id	ページ内に1度しか使えない
class	ページ内に何度でも使える

id属性

「id」は、ページ内で一意に特定できる場所を示すためのものとして使うので、ページ内に１つの名前は1度しか使えないことになります。
CSSでは、id属性は主にページ構造（レイアウト）部分の名前を指定する時に使用します。div要素でページ全体を複数の領域に分割して、その1つの領域に名前を付ける時にid属性を使います。

図のように全体を4つの領域に分けたレイアウトにする場合、それぞれの領域に名前を付けて、レイアウト（段組みなど）を組み立てます。このページの領域の名前ですから、同じ名前の領域は存在することはありませんので、id属性を使うことになります。もちろん、別のページであれば同じ名前を使っても構いません。

id属性は、スタイルシートを適用するためだけに用意されたものではありません。JavaScriptなどのスクリプトからも利用されたり、HTMLのリンクでも使われます。

HTMLリンクでは、ページ内リンクとして使用され、id属性の名前がリンク先の目印になります。
例えば、「<a href="jump">ここをクリックしてジャンプ先にどうぞ</a>」という記述をした時、リンク先の「<div id="jump">ここがジャンプ先です。</div>」と記述されている箇所にジャンプされるようにリンクが設定されます。
このことからも「同じid名は1ページ内に1度しか使えない」という理由が分かるかと思います。

class属性

class属性は、一意に特定する役割はないので、ページ内の何度でも繰り返し同じ名前を定義することができます。
ページ内に何度でも適用させたいデザインを記述する場合にclass属性を使用します。

同一ページ内で、繰り返し同じデザインを付ける時にclass属性は使いますが、その時に付ける名前もある程度デザイン内容を考慮して付けることも大事です。
例えば、複数の箇所の文字の色を「赤」にしたいと思い、「class= "aka"」、または「class= "red"」という名前にしたとします。もちろん、間違いでなく、赤色にするデザインなので最も分かりやすい名前だと考えられます。
しかし、文字色を赤にしたら目立ちすぎるから「オレンジ色」に変更したとします。

CSSの文字色だけを変更すれば、すべてに反映されますが、名前が「red」なのに文字色がオレンジ色になるとclass名の意味合いがなくなってしまいます。

名前というものは後から変更しても、ちゃんと名前そのものに意味を持つものにすることで、後からのメンテナンスがやり易くなります。以下に良く使われる名前を表にしていますが、これを使わなければならないということではありません。自分の好きな名前でも構いませんが、属性名や属性の値となるキーワード名は使わないほうが良いでしょう。

• コンテンツ全体を囲むdivに対して使われる名前
• container、wrapper、page、layout
• ヘッダに対して使われる名前
• header、headerArea
• ナビゲーションに対して使われる名前
• nav、navi、navigation、global-navi、subnavi、g-navi、menu
• メインコンテンツに対して使われる名前
• main、content、contents、maincontent、contentArea
• サイド、サブコンテンツに対して使われる名前
• side、sidebar、sub
• コンテンツの中のボックス、まとまった文章に対して使われる名前
• section、entry、article、column、contentColumn
• フッタに対して使われる名前
• footer、foot

ちなみにCSSで使われる名前は、大文字・小文字は識別されますので、「contents」と「Contents」は異なる名前として認識されます。