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>

表示例

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

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

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

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