class=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

class属性は、要素に対してクラス名（分類名）を指定します。


<p class="example">クラス名を指定します</p>
属性 値
グローバル属性
class="" 要素のクラス名 文字列 分類上の名前

class属性の用途

class属性は、次の用途に使用することができます。

  • スタイルシートのセレクタ（適用対象）として。
  • スクリプトの参照先として。

class属性の指定について

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

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

また、1つの要素に複数のクラス名を指定することもできます。（1つの要素に複数のスタイルを適用させることができます）

  • 複数のクラス名を指定する場合は、次のように半角スペースで区切って記述します。
<p class="example1 example2 example3">1つ目の段落</p>

指定できる要素

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

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。

使用例

スタイルシートのセレクタとして使用した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

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

</style>

</head>
<body>

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

</body>
</html>
表示例

このテキストは赤くなります。

このテキストも赤くなります。

このテキストには下線が付きます。

このテキストは赤で下線が付きます。