class=class - クラスの適用

属性

<tagName class=class> - クラスの適用

説明

要素に、スタイルシートで定義したクラス名を適用します。クラス名は半角スペースで区切って複数指定することができます。スタイルシートに関しては「とほほのスタイルシート入門」を参照してください。

クラス名に使用可能な文字は、HTML 4.0/4.01 では半角英数字([a-zA-Z0-9])、ハイフン(-)、アンダースコア(_)、コロン(:)、ピリオド(.) で、先頭の1文字は半角英字([a-zA-z]) とするとされていましたが、HTML5 や HTML Living Standard では半角スペースを除く任意の文字を使用できることになりました。

id 属性とclass 属性の違いについてですが、id 属性は要素に一意の識別子を割り当てるものであるのに対して、class は、スタイルシートなどで定義したクラスに要素を関係つけるものです。文書内に、同じ ID を持つ複数の要素は存在しないのが普通ですが、同じクラスに関係づけられた複数の要素は存在します。

HTML

○ <div class="c1">...</div>
○ <div class="c1">...</div>      // 複数の要素に同じ class 名をつけるのは OK
○ <div class="c1 c2">...</div>   // ひとつの要素に複数の class 名をつけるのも OK
○ <div id="id1">...</div>
× <div id="id1">...</div>        // 複数の要素に同じ id をつけるのは NG
× <div id="id1 id2">...</div>    // ひとつの要素に複数の id をつけるのは NG

使用例

HTML

<html>
<head>
<title>テスト</title>
<style>
.title { color:red }
</style>
</head>
<body>
<h1 class="title">あいうえお</h1>
</body>
</html>

表示

あいうえお

リンク

初版:2000年10月9日最終更新:2017年12月31日

https://www.tohoho-web.com/html/attr/class.htm

class=class - クラスの適用

属性

説明

使用例

関連項目

リンク