スタイルシートのclassとid

スタイルシートであるグループのスタイルを指定したい場合、class属性またはid属性を使用します。

個々のタグに対して、「style="スタイル"」と指定することもできますが、class属性またはid属性を指定することで、スタイルを別に書くことができます。

HTMLではタグの中にclass="クラス名"、id="id名"と指定します。
スタイルシートには、class属性の場合は「.クラス名」のように「.(ピリオド)」を、id属性の場合は「#id名」のように「#(シャープ)」を前に付けます。

class属性とid属性の違い

class属性とid属性の違いとしては、class属性がページ内に複数指定できるのに対し、id属性はページ内に1つしか指定することができません。

ページ内に唯一の項目でない限りは、class属性を指定することになります。
class属性とid属性のいずれを指定しても、見栄えの違いはありません。

また、class属性とid属性を同時に指定することもできます。
この場合、class属性には一般的なスタイルを、id属性には特有のスタイルで表現するというような使い分けができます。

class属性の使い方

タグの中にclass="クラス名"と指定します。

HTMLファイル

<div class="class1">class指定</div>
<div id="id1">id指定</div>

スタイルシート

div.class1 { color:red; }
div#id1 { color:blue; }

結果

class指定

id指定

class属性を使うと、タグに全般的なスタイルを引き継いで、class属性を追加することができます。
スタイルを引き継ぐことを継承と呼びます。
また、class属性は複数を指定することができます。

下の例では、divタグの全般的なスタイルとして文字色を赤(red)に、class属性のclass1には文字色を青(blue)、さらにclass属性のclass2には背景色をオレンジ(orange)を指定しています。
それぞれのスタイルを引き継いで表現されます。