class 属性 （HTMLグローバル属性）

HTMLのclass属性の説明です。class属性は、1つの要素に対して1つまたは複数のクラス名を定義することができます。

---

目次

1. 属性の記述例
   • 閲覧中ブラウザーでの表示結果
2. 属性の説明
3. 利用可能な属性値

属性の記述例

<h1 class="title back">これはタイトルです</h1>
<p class="text1">これは本文1です</p>
<p class="text2 back">これは本文2です</p>

.title {
  color: white;
}
.text1 {
  color: orange;
  font-weight: bold;
}
.text2 {
  color: yellow;
}
.text2:hover {
  cursor: pointer;
}
.back {
  background: skyblue;
}

document.getElementsByClassName("text2")[0].onclick = function () {
  alert("クリックされました");
};

閲覧中ブラウザーでの表示結果

※ 「これは本文2です」をクリックするとダイアログが表示されます。

 

属性の説明

• class属性は、1つの要素に対して1つまたは複数のクラス名を定義することができます。
• class属性は、複数の要素に対して同じクラス名を定義することができます。
• class属性は、グローバル属性であるため、すべての要素で利用することができます。
• class属性は、主にスタイルシート（CSS）にて適用する要素を指定するために利用されます。また、JavaScriptのDOMを指定する場合の識別子としても利用されます。

 

利用可能な属性値

属性値	属性値の説明
クラス名	要素のクラス名を1つ以上指定できます。複数のクラスを指定するには、空白文字を挟みます。クラス名には、半角英数字、ハイフン（-）、アンダースコア（_）