class属性

属性 class は、要素（ここで言う要素はタグのことです）に1つまたは複数のクラスを指定します。

これは、同じクラスが指定された要素のグループに対してCSSを通じてアクセスし、特定のプロパティ（例えばテキストの色やフォントサイズなどを変更する）を適用するために行います。

また、id属性もあり、これは属性 class と同様にHTMLページ上の要素を選択することを可能にします。

属性 class と id属性の違いは、classが要素のグループを選択するのに対し（たとえ1つの要素にしか指定されていなくても、後で別の要素に指定することができます）、idはユニークな要素を選択する点です（そのidを持つ要素はサイトのページ内に複数存在してはならず、存在すると競合が発生します）。

要素にクラスとidのどちらを指定すべきか、どう判断すればよいでしょうか？クラスは、サイトのページ内で繰り返し現れる要素（同じCSSコードを複数回書かないようにするため）に指定します。たとえ今現在その要素が1つしかなくても、将来的に同様の要素が現れる可能性があると感じる場合は、その要素にクラスを指定してください。もしその要素がユニークであると確信できる場合は、idを指定します。ただし、現在はすべての要素にクラスを指定し、idはJavaScript用に残す傾向がありますが、これは一般的に受け入れられているわけではありません。

要素には複数のクラスを指定することができ、その場合はスペースで区切って列挙します。

クラス名は、英字、数字で構成し、スペースを含めてはいけません（スペースはクラスを互いに区切るために使われます。代わりにアンダースコアやハイフンを使用できます）。クラス名は数字で始めてはいけません（HTML5では可能ですが、古いブラウザでは動作しません）。

クラスには英語で名前を付けるべきです（ロシア語を英字で書くのではなく！）。名前は意味を持ち、クラスの本質を反映したものであるべきです。

例

クラス test が指定されているすべての段落に、テキストの色を赤に指定してみましょう：

<p class="test">クラス test を持つ段落。</p>
<p>クラスなしの比較用段落。</p>

.test {
	color: red;
}

例 . 要素への複数のクラス

ここでは、最初の段落に複数のクラス、test1 と test2 を指定してみます（スペースで区切って記述）。クラス test1 はテキストの色を赤に、クラス test2 はフォントサイズを 20px に指定します。2番目の段落にはクラス test1 のみを指定します（この段落は赤くなります）。3番目の段落にはクラス test2 を指定します（この段落のフォントサイズは20pxになります）。2つのクラスを持つ最初の段落は、赤い色と20pxのフォントサイズの両方を持つことになります：

<p class="test1 test2">クラス test1 と test2 を持つ段落。</p>
<p class="test1">クラス test1 を持つ段落。</p>
<p class="test2">クラス test2 を持つ段落。</p>
<p>クラスなしの比較用段落。</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

class属性

例

例 . 要素への複数のクラス

関連項目