グローバル属性~“class”属性

“class”属性について

“class”属性は要素にクラス名を指定するための要素です。クラス名はスタイルシートのクラスセレクターとして要素にスタイルを適用するのに使用したり、スクリプトで要素を参照先とするために使用したりすることができます。

空白文字で区切ることで複数のクラス名を同じ要素に指定することができます。また、同じ文書内の複数の要素に同じクラス名を指定できます。

指定できる値

空白文字で区切ることで複数のクラス名を同じ要素に指定することができます。

クラス名は英字の大文字と小文字が区別されます。

クラス名の形式についてHTMLの仕様では制約はありませんが、CSSやスクリプトなどからの参照のする場合は利用先の制約に従う必要があります。例えば、CSSのクラス・セレクタとして使用する場合は有効なCSS識別子でなければならず、ハイフン(“-”)とアンダーバー(“_”)以外の記号はそのまま使用できない、最初の文字が数字であってはいけないなどの決まりがあります。

サンプルコード

.special-text {
font-style: italic;
}

.extraordinary-text {
font-weight: bolder;
}

.peculiar-text {
text-decoration: underline;
}


<p>特に意味のないテキストだが<span class="special-text">この部分</span>だけはイタリック体にしたかったのでスタイルシートでイタリック体にしてみた。</p>
<p>そして<span class="extraordinary-text">この部分</span>は太字に、<span class="peculiar-text">この部分</span>には下線を引いた。</p>
<p>特別に<span class="special-text extraordinary-text peculiar-text">この部分</span>はイタリック体で太字で下線も引いた。</p>


特に意味のないテキストだがこの部分だけはイタリック体にしたかったのでスタイルシートでイタリック体にしてみた。

そしてこの部分は太字に、この部分には下線を引いた。

特別にこの部分はイタリック体の太字で下線も引いた。