CSSでのクラスの利用 - ミドリ黄のプログラミングメモノート

例えば、h2タグの字を赤くしようとした場合は、CSSファイルで

h2{
    color: red;
}

とすれば、HTMLで

<h2>h2</h2>

と記述したとき

と表示されます。

しかし、この方法ではあるh2タグでは文字を青く、別のh2タグでは緑色に表示したいなどができません。

クラスというものを利用すればこの問題を解決できます。CSSでは

.クラス名{
/*処理*/
}

と記述することでクラスごとに表示を変えることができます。

このクラスをHTML内で利用するためには

<p class="クラス名"></p>

とすればよいです。

.red{
    color: red;
}

.blue{
    color: blue;
}

<p class="red">赤く</p>
<p class="blue">青く</p>

赤く

青く

先ほどのように

.クラス名{
/*処理*/
}

としたクラスはすべてのタグで利用できます。しかし、特定のタグでのみ利用できるクラスを作成することも可能です。

タグ名.クラス名{
/*処理*/
}

とすることでこの処理が可能になります。HTMLでの利用方法はタグ指定がない場合と同じです。

p.red{
    color: red;
}

p.blue{
    color: blue;
}

<p class="red">赤く</p>
<p class="blue">青く</p>

赤く

青く

タグ指定のメリットは
同名のクラスでもタグが違うと別のクラスとみなせる。
ということです。

例えば、pとdivでそれぞれ「red」というクラスを作成することが可能となります。CSSで

p.red{
    color: red;
}

div.red{
    color: green;
}

と記述すれば、HTMLファイルで

<p class="red">p red</p>
<div class="red">div red</div>

と記述したときブラウザでは

p red

div red

と同じクラス名にもかかわらず別々の表示をするようになります。