class 属性クラス名を付与する
class 属性は要素にクラス名を付与します。
class 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。複数の値を半角スペースで区切って列挙することができます。なお、重複は無視されます。
class 属性値に使用できる文字列に特に制約はありませんが、セレクタとして使用する場合に問題が起こる可能性がありますので、半角英数字による指定、さらに英字からはじまる値を選択するのが無難です。詳しくは 「id / class 属性に使用できる文字列」 をご覧ください。
また、その要素の見た目を表すものではなく、意味を表す値を選択するべきです。例えば、注意書きを赤い文字にするからといって、class="red" のような指定にするのではなく、「注意書き」 という意味を表すように、class="attention" などと指定するのが妥当です。
class 属性の仕様
- この属性を使用できる要素
-
- すべての HTML 要素
class 属性のサンプルソース
<!-- code 要素に class 属性を付与し、言語が JavaScript だと表した例 -->
<pre>
<code class="language-javascript">
$(function(){
$('#menuButton').click(function() {
$('#menu').toggle('fast');
});
});
</code>
</pre>
<!-- 写真を含む figure 要素だということを表した例 --> <figure class="photo"> <figcaption>家族で熱海に旅行に行ったときの写真</figcaption> <img src="photo.jpg" alt="熱海の海を背景に撮影。私と母が写っています。" /> </figure>
<!-- 複数の値を指定することも可能です --> <img class="photo family travel" src="photo.jpg" alt="熱海の海を背景に撮影。私と母が写っています。" />