特定の要素にのみクラスで指定する

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

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内で何度も使える

クラスによる指定は、HTML内で同じクラス名(つまりは、同じ書式)を何度も使用することが出来ます。

ただし、使用できるのは、CSSで定義した特定の要素名に限定されます。

CSS/HTMLサンプル

CSS
p.bold { font-weight:bold ; }

HTML
<p class=”bold”>…</p>
<p>…</p>

特定の段落にのみクラスで文字の太さを変える サンプル

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

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

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

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

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