class=""

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O

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属性はグローバル属性のため、HTML5の全ての要素に指定することができます。

使用例

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

<!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>

表示例

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

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

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

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