HTML

The class attribute in HTML is used to assign identifiers to elements for applying styles or behaviors.

class属性

　HTMLのclass属性は、要素に１つ以上のクラス名を割り当てるために使用される属性です。クラスは CSSや JavaScriptなどで使用される重要な要素であり、特定のスタイルや動作を複数の要素に適用することができます。同じクラス名を持つ要素は、同じスタイルを共有したり、同じ JavaScriptのイベントハンドラを適用したりすることができます。

　主に CSSでスタイルを適用する要素のグループを指定するためのセレクタ（適用対象）として用いられる。例えば、

<p class="example">クラス名を指定します</p>

のように定義すると、CSSのセレクタで「.example」のように先頭を「.」（ピリオド）にした記法を用いて要素をまとめて指定することができる。

.example {
	// スタイル指定
}

　class属性はグローバル属性のため、HTMLの全ての要素に指定することができますので、様々な要素に対して適用できます。

<div class="example"></div>
<p class="example"></p>
<form class="example"></form>

　この属性で指定するクラス名は、同じページ内で複数の要素に同じ名前を指定することができます。（１つのスタイルを複数の要素に適用させることができます）

<p class="example1">1つ目の段落</p>
<p class="example1">2つ目の段落</p>
<p class="example1">3つ目の段落</p>

　class属性と似たようなものとして、id属性があり、「class属性は同じ名前を１ページ内で何度でも使えますが、id属性は１ページ内に１度しか使えません。」class属性と id属性の違いについてはよくある疑問として挙げられますので、これを機にしっかり覚えておきましょう。

　また、1つの要素に複数のクラス名を指定することもできます（1つの要素に複数のスタイルを適用させることができます）。複数のクラス名を指定する場合は、次のように半角スペースで区切って記述します。

<p class="example1 example2 example3">1つ目の段落</p>

　クラス名に使用できる文字は半角英数字、ハイフン(-)、アンダーバー(_)で、アルファベットの大文字と小文字は区別されます。クラス名の先頭は必ずアルファベットで始める必要があります。

　CSS同様に、JavaScriptでも HTMLで指定した class属性に対して処理を行うことが可能です。

document.getElementsByClassName("クラス名")

　documentで HTML文書全体を指し、「getElementsByClassName()」メソッドで指定したクラス名を持つ DOMオブジェクト（HTML要素）の配列を得ることができます。個々のオブジェクトは .classNameプロパティで class属性の文字列を、.classListプロパティでクラス名の配列を参照できる。

Sample

<p class="example1">このテキストは赤くなります。</p>
<p class="example1">このテキストも赤くなります。</p>
<p class="example2">このテキストには下線が付きます。</p>
<p class="example1 example2">このテキストは赤で下線が付きます。</p>

.example1 { color: #ff0000; }
.example2 { text-decoration: underline; }

Sample 2

<p>あいうえお</p>
<p class="example3">かきくけこ</p>
<button type="button" onclick="changeButton()">テキスト変換</button>

function changeButton() {
	var elements = document.getElementsByClassName("example3");
	elements[0].innerHTML = "テキストを変更しました！";
};