.クラス { プロパティ:値 ; …}
CSS/HTMLの書き方
CSS
.クラス { プロパティ:値 ; プロパティ:値 ; …}
HTML
<要素名 class=”クラス”>…</要素名>
解説
クラス指定によってスタイルシートを適用する方法です。
上記のように、CSSでクラス名を記述し、スタイルシートを適用したいHTMLの要素の開始タグにそれと同じクラス名を指定すれば、その部分に対してスタイルシートを適用することが出来ます。
なお、CSSのクラス名の前には「.(ドット)」を書く必要があります。(ドットが無い形は要素にスタイルシートを適用する方法。違いに注意。)
クラスで指定する利点
CSSでスタイルシートを定義するとき、ドットが無い形で要素名に直接スタイルシートを適用してしまうと、HTML内で登場するその要素すべてに同じスタイルシートが適用されてしまいます。
例えば、<P>段落でも段落ごとにスタイルシートを変えたいこともあるので、このような時にクラスによる指定が役立ちます。
クラス名は任意
クラス名は自由に決めることが出来ますが、複数を同じ名前にすることや分かりにくい名前を付けるのは避けた方が良いでしょう。
HTML内で何度も使える
クラスによる指定は、HTML内で同じクラス名(つまりは、同じ書式)を異なる要素に何度も使用することが出来ます。
例えば、段落と、リンクの文字の大きさを同じにすることができます。
CSS/HTMLサンプル
CSS
.size17 { font-size:17px ; }
HTML
<p class=”size17″>…</p>
<a href=”#” class=”size17″>…</a>
段落とリンクの文字の大きさを17ピクセルに サンプル