この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。
IDとClassはフックです
HTML/XHTML文書の内容を表現するには何かしらの方法が必要です。<hや<p>、<ul>と言った基本的な要素はそれ自体でも役割を持っていますが、大体の基本的なタグはページ要素やレイアウトの選択と言った設定をカバーしているわけではありません。そのためIDやClassを用いる必要があります。例えば<ul id=”nav”>と記述すれば、このULリスト（箇条書きリスト）に目印を付けたことになるので、ページ上にある他のULリストと区別して、このIDがついたULリストだけに特別な設定をすることが可能になります。またフッターなど関連したタグがないセクションでも、<div id=”footer”>としておけば区別しやすくなります。また、他のコンテンツとは別にしてサイドバーにいくつかボックスを持たせている場合は、<div class=”sidebar-box”>などと記述することが出来ます。
これらのIDやClassは“フック（引っ掛け針）”で、マークアップを構築する際にとても重要な手段となります。日本語では「目印」と言った方が分かりやすいかもしれませんね。CSSを使うときにはセレクタを築いたりスタイル設定をする際に、明らかに必要と言えるでしょう。JavaScriptなど他の言語でもIDやClassに頼るところが大きいと思います。しかし、IDとClassの違いとは一体何なのでしょうか。
IDはユニーク（唯一無二）
それぞれの要素は1つのIDしか持つことが出来ません。
個々のページでそのIDを使用した要素もまた、たった1つでなければなりません。
初めにこれを習った時に、「IDは一度しか使えないけれど、Classは何度でも使えるよ。」と言うことを何度も何度も聞かされました。けれど私にとっては何か「非常に重要なこと」というよりもむしろ「ただ経験でものを言ってるだけでしょ。」と感じられたので、右から左に筒抜け状態でした。もしあなたがHTML/CSS命！の人ならば、実際あまり違いを感じられないと思うのでそういう状態は続くでしょうね。
けれど1つ大切なことがあります。もし同じIDを2つ以上の要素で使用したならば、バリデーションチェックでエラーが出てしまいます。バリデーションチェックは非常に重要なので、これを無視することは出来ません。なので何故1度しか使えないのかもう少し追求してみましょうか。
Classはユニーク（唯一無二）ではない
複数の要素で同じClassを使用することが可能です
複数のClassを同じ要素内で使用することも可能です
もしページ上で何度も使用される可能性があるスタイル設定ならば、Classを使うべきです。例えば複数の”widgets”を使用しているページがあったとします。
<div class="widget"></div> <div class="widget"></div> <div class="widget"></div>
さぁこれで同じ内容でスタイル設定したい時には、Class名”widgets”をフック（目印）として使用することが出来ます。けれどもし一箇所だけ、同じスタイル設定だけれども他の部分より大きめに表示させたい場合はどうしたらよいでしょう。そんな時には以下のように他のClass名も追加すれば、カバーしてくれます。
<div class="widget"></div> <div class="widget big"></div> <div class="widget"></div>
あらたに新Class名を追加する必要はなく、ただ追加したい設定がしてあるClass名を同じタグの中に追加すればよいだけです。これらのClassはスペースで区切られ、いくつ追加しても大体どのブラウザでも対応可能です。（実際その数は1000以上とも言われています。私たちが使いそうな数よりは明らかに多いことだけはハッキリしていますね。）
IDやClassに対しブラウザのデフォルト設定はありません
Class名やIDを要素に追加したとしても、デフォルトで何かが自動的に設定されているということはありません。
初心者の時はよくこれで戸惑いました。1つのサイトで作業をしていて、何か特定のClass名を追加すると問題が解決するなんてことがたまにあります。そのため同じ問題が起こっている別のサイトでも、このマジカルパワーを持ったクラス名を追加すれば解決するだろうなんて思ってしまいますが、そんなことはありません。
ClassとID自体は、スタイル設定の情報を持っているわけではないのです。CSSのターゲットになってスタイル設定を受け入れているだけです。
バーコードとシリアルナンバー
そうですね、バーコードとシリアルナンバーを例にして考えてみると、分かりやすいかもしれません。お店でiPodを手に取ったとします。パッケージには、バーコードが記載されています。バーコードをスキャンすれば、店舗は商品情報を得ることが出来ます。システム上には「どういったプロダクトで価格は幾らなのか。」などという情報がきちんと登録されているわけです。ひょっとしたら、どんな色なのかとか、お店のどこに保管されているのかなどと言った情報も含まれているかもしれません。そして同機種のiPodのバーコードは全て同じ番号なわけです。
iPodにはまたシリアルナンバーも割り当てられています。シリアルナンバーはユニークナンバーなので、同じシリアルナンバーを持ったiPodや他のデバイスは世界のどこにも存在しません。シリアルナンバーには価格等の情報は含まれていません。そうすることも可能ではありますが店舗側にとってあまり賢い方法とは言えないと思います。例えば価格変更などがあった際に、バーコードなら機種統一のバーコードに登録されている価格を変更すればことが済みますが、シリアルナンバーの場合は1つ1つの機種の登録価格をいちいち変更しなければなりません。
IDとClassの違いも丁度こんな感じです。再利用するような情報はClassに設定して、1度しか使わないようなユニークな情報はIDに設定すればいいのです。
IDには特殊なブラウザ機能があります
Classはブラウザの中では特に特別な能力はありませんが、IDは1つとっておきの切り札を隠し持っています。それは何かというとURL上での「ハッシュ値」です。もしhttp://yourdomain.com#commentsというようなURLがあったとしたら、ブラウザはyourdomein.comページ内のcommentsというID設定がされた個所を自動的にスクロールして表示させます。ここで重要なのは、もし順番に見て欲しいエレメントがあったとしてもスクロールされてしまうのです。例えあなたがBody部分にスクロール可能な何か特別なDIV設定をしていたとしても、そのDIV設定自体無視されスクロールされてしまいます。
これが、IDは1つのページに1度しか使うことが出来ない大きな理由です。1度しか使わないからブラウザはどこを表示したらよいのか認識することが出来るのです。
要素内には両方記述することが出来ます
1つの要素内に、IDとClassの両方を書き込むことは全く問題ではありません。むしろよい考えであることの方が多いのです。WordPressのコメントリストアイテムのデフォルトマークアップを考えてみましょう。
<li id="comment-27299" class="item">
ここではClassに対し、ページ上で表現したい全てのスタイル設定をしてあります。それと同時にWordPressが生成したユニークIDも記述されています。このIDは直接リンクしている場合に有効です。これで特定のページの特定のコメントに簡単にリンクすることが出来ます。
CSSでは大した問題ではありません
CSSに関して言うと、IDで出来てClassでは出来ないことはないし、その逆もまた然りです。最初にCSSを習った時に、うまく解決出来ないことがあり、トラブルシューティングの為にIDとClassを入れ替えてみたりしたこともありますが、これは全くCSSでは関係ないのです。
JavaScriptでは関係してきます
JavaScriptの達人ならば、ClassとIDの違いはきっと既にきっちり理解しているでしょうね。JavaScriptでは、IDはページ上に1つしか存在しないと言う前提で動作しています。そうでないと頻繁に使用されるgetElementByIdファンクションも使い物になりません。もしｊQueryに精通なさっている方ならば、ページエレメントにClassを簡単に追加や削除出来ることをご存じなはずです。それがｊQueryの大切な機能でもあるからです。IDにはそんな機能が存在しないことをお気づきになりましたか。こういった値を操作するのはJavaScriptの責任ではありません。下手な使い方をすると本来の価値よりもむしろ大きな問題に繋がるからです。
必要なければ使わなければいいのです
今までお話してきたとおり、ClassとIDはとても重要で、スタイル設定やページ操作には欠かせないものです。けれども慎重に意味的に利用するべきです。
そうすれば以下のような間違いを防ぐことが出来るはずです。：
<a href="http://digitalskill.jp" class="link">Digital Skill</a>
ご存じの通り、このタグはリンク、すなわちa要素（アンカー要素）ですね！a要素はタグ内に直接スタイル設定が出来るのだから、ここにわざわざclassを追加する必要はないのです。
こんな間違いも防げるはずです。：
<div id="right-col">
ページ内に右側コラムが1つしかないなら、ここにIDを記入すること自体に問題なないのですが、名前の付け方がよくありません。要素の内容を分かりやすくしようと思ったのかもしれませんが、配置場所とか見え方とかそういう名前の付け方はあまりよくありません。ただ「sidebar」とした方が適切です。
マイクロフォーマットは正に特定のClass名です
マイクロフォーマットは難し過ぎると思っていませんか？実際はそんなことないのです。マイクロフォーマットは保有している情報がどんな情報を表しているのか、規格化されたクラス名でマークアップしましょういう仕様に過ぎません。標準的なvCardを見てみましょう。
<div class="vcard">
<a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">169 University Avenue</div>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> +1-650-289-4040
</div>
<div class="tel">
<span class="type">Fax</span> +1-650-289-4041
</div>
<div>Email:
<span class="email">info@commerce.net</span>
</div>
</div>
