class=""

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

class属性で、要素に対してクラス名（分類名）を付けることができます。

このクラス名は、主にスタイルシートのセレクタ（スタイルの適用対象）として使用されることになります。


<p class="example"> ～ </p>
属性 値 説明
class="" クラス名 分類上の名前を指定

クラス名について

クラス名を付ける際には、以下の点に注意してください。

  • 大文字と小文字の区別があります。

クラス名をCSSのセレクタとして使用する場合は、上記以外にも以下の点に注意してください。

  • 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）です。
  • アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されなくなります。
  • アルファベットで始めなければなりません。（数字や記号で始めてはならない）

クラス名の指定方法

同じ文書内で、1つのクラス名を複数の要素に指定することができます。（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>
  • 上記のように、半角スペースで区切って記述します。

指定できる要素

この属性は、ほとんどの要素で使用することができます。詳しくは、各要素の概要で確認してください。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

.example1 { color: red; }
.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>
表示例

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

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

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

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