class属性

Updated / Published

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の規格より、クラス名にはどのような文字種でも使えるように制限はもうけられていません。つまり、クラス名は自由に決めることができます。日本語や記号などもクラス名にすることができます。ただし、クラス名をつける際にCSSのセレクタとして利用できるようにするには、CSSの文法に従ったクラス名を与える必要があるため、以下のことに注意されることをおすすめします。

CSS1 の仕様に中途半端な対応しかできていない Internet Explorer 4 と Macintosh版Netscape Navigator 4.x 系列ではクラス名にアンダーバー（_）があるとスタイルの適用が無効になりますが、今となっては、このような古いUAを使用しているユーザはほぼ皆無であるため、クラス名にアンダーバー（_）を使うことは問題となりません。しかしながら、CSS2.1の規則では半角アルファベット（a-z|A-Z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）以外の文字種はすべてU+00A0以上のUnicodeエスケープされた文字に変換する必要があるため、ひらがなやカタカナの日本語文字列や記号などを含めることはまったく実用的ではありません。もちろん古いUAにおいては、たとえUnicodeエスケープしたとしてもパースできず、エラーが出て、スタイル情報を正しく認識・参照できない弊害がでてくることもあります。

以上のことを踏まえると、クラス名の構成は半角アルファベット（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">https://w3g.jp/xhtml/dic/class</code>

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

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

<body>
<div class="section">
<h1>章見出し</h1>
<div class="section">
<h2>節見出し</h2>
<div class="section">
<h3>項見出し</h3>
<p>段落</p>
</div>
</div>
</div>
<div class="footer">
初版：<span class="time">20xx年xx月xx日</span>
</div>
</body>