class属性は、その要素にクラス名を指定します。クラス名を指定する主な目的はスタイルシート(CSS)のセレクタ(スタイルを適用する対象の目印のこと)として使われます。id属性と異なり、ひとつの文書内に同じクラス名を何度でも用いることができます(重複可)。また、半角スペースで区切って列記することで、ひとつの class属性の値に複数のクラス名をつけて複数のスタイルを適用することもできます。
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属性に複数のクラス名を指定することができます。
<style type="text/css">
.note { text-decoration : underline ; }
.caution { color : red ; }
</style>
......
<p class="note">クラス名は大文字・小文字を区別する。</p>
<p class="note caution">クラス名は大文字・小文字を区別する。</p>
class属性はスタイルシート(CSS)のセレクタとなる他にも、以下のように構造に意味を付加する目的で活用されることもあります。
<code class="JavaScript">JavaScript のソースコード</code> <code class="HTML">HTML のソースコード</code> <code class="URI">http://w3g.jp/xhtml/dic/class</code>
div要素・span要素による木構造(ツリー構造)や各構造の明示<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>
http://w3g.jp/xhtml/dic/class実績:大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー