World Wide Web Guide

class属性

class属性は、その要素にクラス名を指定します。クラス名を指定する主な目的はスタイリングの際の目印であるCSSのセレクタとして使われます。id属性と異なり、ひとつの文書内に同じクラス名を何度でも用いることができます（重複可）。また、半角スペースで区切って列記することで、ひとつの class属性の値に複数のクラス名をつけて複数のスタイルを適用することもできます。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
必須
-
非推奨
-
属性値
クラス名

クラス名に使える文字種について

HTML2.x（IETFにて制定）の規格では、クラス名に半角英数字(1-9|a-z|A-Z)とピリオド（.）、ハイフン（-）のみを使うことができたのですが、W3C が策定した HTML4の規格より、クラス名にはどのような文字種でも使えるように制限はもうけられていません。つまり、クラス名は自由に決めることができます。日本語や記号などもクラス名にすることができます。ただし、クラス名をつける際に以下のことに注意されることをお奨めします。

クラス名を付ける際に、アンダーバー（_）などが含められている場合、ユーザーの閲覧環境（UA）によっては、指定されているスタイル情報を正しく認識・参照できない弊害が出てくることがあります。たとえば、CSS1 の仕様に中途半端な対応しかできていない Internet Explorer 4 と Macintosh版Netscape Navigator 4.x 系列ではクラス名にアンダーバー（_）があるとスタイルの適用が無効になります。しかし、今となっては、このような古いUAを使用しているユーザーはほぼ皆無であり、クラス名にハイフン（-）やアンダーバー（_）を使うことに問題はないでしょう。また、クラス名に日本語の平仮名やカタカナを使ってもスタイルの適用対象として認識できるUAもありますが、Netscape Navigator 4などの古いUAにおいてはパースできず、エラーが出て、スタイル情報を正しく認識・参照できない弊害がでてくることがあります。

以上のことを踏まえると、クラス名の構成は半角アルファベット（a-z|A-Z）から書き出して、半角英数字（1-9）とハイフン（-）とアンダーバー（_）のみの記号の組み合わせにしておきましょう。なお、クラス名は半角アルファベットの大文字・小文字を区別する（case-sensitive）ので厳密な指定が必要です。

class属性を指定できる要素型

A から始まる要素
B から始まる要素
C から始まる要素
D から始まる要素
E から始まる要素
F から始まる要素
H から始まる要素
I から始まる要素
K から始まる要素
L から始まる要素
M から始まる要素
N から始まる要素
O から始まる要素
P から始まる要素
Q から始まる要素
R から始まる要素
S から始まる要素
T から始まる要素
U から始まる要素
V から始まる要素
W から始まる要素

class属性のサンプル

複数のクラス名を指定したセレクタとして用いられるケース

ひとつのclass属性に半角スペース区切りで、複数のクラス名を指定することができます。

<style type="text/css">
.note   { text-decoration : underline ; }
.caution { color : red ; }
</style>
......
<p class="note">クラス名は大文字・小文字を区別する。</p>
<p class="note caution">クラス名は大文字・小文字を区別する。</p>

意味を付加する目的で用いられるケース

class属性を付与し、同じ要素でも語句の意味を示すことによって区別しています。

<code class="JavaScript">JavaScript のソースコード</code>
<code class="HTML">HTML のソースコード</code>
<code class="URI">http://w3g.jp/xhtml/dic/class</code>

構造を明示するために用いられるケース

ここではdiv要素で木構造（ツリー構造）を、div要素の木構造（ツリー構造）内のさらなるインラインの各構造をspan要素で明示するケースとしてclass属性を用いています。

<body>
<div class="chapter">
<h1>大見出し</h1>
<div class="section">
<h2>中見出し</h2>
<div class="paragraph">
<p>段落</p>
</div>
</div>
</div>
<div class="footer">
初版：<span class="date">20xx年xx月xx日</span>
</div>
</body>