CSSの基本（２）

クラスを使って、CSSを指定する。

「CSSの基本（１）では、同じタグにCSSを一括指定する方法を書きました。
ただし、この方法では全てのタグが同じ書式で表示されてしまいます。
そこでこのページでは、タグをクラスで分類し、クラスに対してCSSを指定する方法を書きます。


タグにクラス名を付ける。
クラスを利用してCSSを指定する場合は、各タグにclass属性を追加し、
その名前でタグをクラス分けします。たとえば、以下はIMGタグを3つにクラスに分けた例です。
1つ目のIMGタグはclass属性の値が"green"ですので、"green"のクラスに属します。
同様に、2つ目のIMGタグは"red"のクラス、３つ目のIMGタグは"blue"のクラスになります。
4つ目のIMGタグは、class属性がないためいずれのクラスにも属しません。
なお、それぞれのクラス名は半角の英数字でれば自由に命名することが可能です。

　　：
<IMG class="green" src="photo01.jpg">
　　：
<IMG class="red" src="photo02.jpg">
　　：
<IMG class="blue" src="photo03.jpg">
　　：
<IMG src="photo04.jpg">
　　：


クラスに対してCSSを指定する。
次に、クラスに対してCSSを指定します。クラスに対してCSSを指定する場合は、
以下のように（タグ名）.（クラス名）{…}という具合にCSSを記述します。
この例では、クラス名"green"のIMGタグを「緑色の二重線」で表示、
クラス名"red"のIMGタグを「赤色の二重線」で表示、クラス名"blue"のIMGタグを「青色の二重線」で表示、
という書式を指定しました。なお、クラス名が指定されていないIMGタグは、初期設定の書式、
すなわち「枠線なし」で表示されます。

<STYLE type="text/css">
<!--
IMG.green{
border:double 6px #009900;
}
IMG.red{
border:double 6px #FF0000;
}
IMG.blue{
border:double 6px #0000FF;
}
-->
</STYLE>
　：
　：
<IMG class="green" src="photo01.jpg">　
<IMG class="red" src="photo02.jpg">　
<IMG class="blue" src="photo03.jpg">
<IMG src="photo04.jpg">


（画面クリックでWEB上のサイズを見てください。）