ID属性、定義、および使用法
id属性は、HTML要素の一意のIDを指定します(値はHTMLドキュメント内で一意である必要があります)。
id属性は、スタイルシート内のスタイルを指すために最もよく使用され、JavaScript(HTML DOMを介して)によって特定のIDを持つ要素を操作するために使用されます。
詳しくはこちらをご覧ください。
CLASS属性、定義、および使用法
class属性は、要素の1つ以上のクラス名を指定します。
class属性は主に、スタイルシートのクラスを指すために使用されます。ただし、JavaScriptで(HTML DOMを介して)使用して、指定したクラスのHTML要素に変更を加えることもできます。
詳しくはこちらをご覧ください。
したがって、クラスのIDを使用してスタイルを設定できます。クラスは、Webページ全体の他の要素で再利用できることを知っているだけで、IDは常に一意である必要があります。
クラスがCSSを適用するために利用するのに最適な属性であると言う理由は、一般的なクラス名を使用してWebページ全体で多く使用できるため、コーディングにかかる時間を簡素化および削減できるためです:)
簡単な例:
HTML
<div id="theUniqueID">
Hello!
</div>
<div id="theUniqueIDTwo">
Hello Again!
</div>
CSS
#theUniqueID {
font-size: 15px;
text-align: right;
}
#theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
次のように減らすことができます:
#theUniqueID, #theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
そして、次のようにドキュメント全体で一般的に利用できます。
.format_01 {
font-size: 15px;
text-align: right;
}
次に、次のようなHTMLを使用します。
<div class="format_01">
Hello!
</div>
<div class="format_01">
Hello Again!
</div>
<div class="format_01">
Hello Again and Again!
</div>
追伸:
やり過ぎの答えで申し訳ありませんが、これにより知識の少ない人も学ぶことができます。