ミドリ黄のプログラミングメモノート

主にUnity(C#)を中心としたプログラムの備忘録

CSSでのクラスの利用




クラスについて

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

h2{
    color: red;
}

とすれば、HTMLで

<h2>h2</h2>

と記述したとき

h2

と表示されます。

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




クラスの利用(タグ指定なし)

基本

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

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

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

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

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

とすればよいです。


使用例

CSSファイルの記述
.red{
    color: red;
}

.blue{
    color: blue;
}



HTMLファイルの記述
<p class="red">赤く</p>
<p class="blue">青く</p>



ブラウザでの表示


赤く

青く





クラスの利用(タグ指定あり)

先ほどのように

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

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


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

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


使用例

CSSファイルの記述
p.red{
    color: red;
}

p.blue{
    color: blue;
}



HTMLファイルの記述
<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

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