クラスでスタイルシート(CSS)を指定する

.クラス { プロパティ:値 ; …}

CSS/HTMLの書き方

CSS
.クラス { プロパティ:値 ; プロパティ:値 ; …}

HTML
<要素名 class=”クラス”>…</要素名>

CSSの詳細情報
対応ブラウザ Windows MAC
IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0
CSSレベル CSSレベル1

解説

クラス指定によってスタイルシートを適用する方法です。

上記のように、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ピクセルに サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!