class - 要素にクラス名を指定する

classは、スタイルシートで対象を指定したり、JavaScriptで対象にアクセスしたりするためのトークン(キーワード)を、要素に設定するための属性です。指定した個々のトークンが、クラス名として扱われます。半角スペースで区切って複数の値を指定できます。値に指定する文字は、空白文字以外であれば何でも大丈夫です。

説明

下記は、syncerというクラス名をclass属性に指定して、スタイルシートで黒の背景色を適用した例です。このように、スタイルシートで要素を対象にするためのフック(留め金)のような役割を果たすのが、class属性値です。

HTML

<p>今日は、心が<span class="syncer">どんより</span>と重い…。</p>

CSS

/* [syncer]というクラス名の要素の背景色を黒にする */
.syncer {
	background: #000 ;
}

今日は、心がどんよりと重い…。

先ほどのsyncerというclass属性値に、今度はJavaScriptのgetElementsByClassName()というメソッドを使ってアクセスし、背景色を赤に変更する例です。このように、スタイルシートだけではなく、JavaScriptでアクセスするためのキーワードでもあります。

JavaScript

// クラス名が[syncer]の要素を取得
var elements = document.getElementsByClassName( "syncer" ) ;

// 対象の背景色を赤に変更する
elements[0].style.backgroundColor = "#f00" ;

複数指定する

class属性は、スペースで区切って複数指定することができます。スタイルシートの内容などに併せて、適宜指定しましょう。

HTML

<p>今日は、心が<span class="aaa bbb">どんより</span>と重い…。</p>

どんな文字でも使える

class属性に指定する個々の値には、スペース以外の文字を指定できます。ただし、スタイルシートで利用する場合、数字が先頭のクラス名は基本的にフックにはできません。常識的には、半角英数字とハイフン(-)、アンダーバー(_)以外を使うことはないでしょうが、覚えていて損はないはずです。

HTML

<p>今日は、心が<span class="ああ">どんより</span>と<span class="123">重い</span>…。</p>

CSS

.ああ {
	color: #fff ;
	background: #000 ;
}

[class="123"] {
	color: #fff ;
	background: #f00 ;
}

今日は、心がどんよりと重い…。

トークンとは？

class属性に指定する個々の値を「トークン」と言います。class属性に指定した個々のトークンがクラス名として扱われる、という形です。W3Cのリファレンスによると、A string that does not contain any space characters.、すなわち、「半角スペースを含まない文字列」という定義ですね。

classとidの違い

idとclassは、スタイルシートのフックになる、JavaScriptでアクセスするためのキーワードになる、という点でとても似た性質を持っています。が、idにあって、classにない特徴が2点あります。

一意の識別子

idはその名の通り、一意の識別子です。1つのドキュメント内に、同じidを複数指定することはできません。

アンカーの役割

idは、ページ内リンクのアンカーになります。例えば、id属性値がsyncerの要素にページ内リンクを貼るには下記の通りです。class属性値はアンカーになりません。

HTML

// ID名が[syncer]の要素にページ内リンクを貼る
<p><a href="#syncer">SYNCERまで移動</a></p>

参考情報

  • class … W3Cの勧告。class属性についての説明です。
  • Token … W3Cのドキュメント。トークンの定義です。