超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ クラスによる設定

ここではクラス(class)による設定について勉強します。
クラスを使う目的および方法は2つあります。

・1つのタグに2つ以上のスタイルを適用する。
・2つ以上のタグに1つの(同じ)スタイルを適用する。

例えば、<h4> タグにこのようなスタイルを設定すると、

h4{ color:#0000ff; }

<h4>とうきょうとっきょきょきゃきょきゅ?</h4>

とうきょうとっきょきょきゃきょきゅ?

となりますが、スタイルが適用されている範囲で <h4> タグを何回か使いたいけど、色だけは変えたいという場合もありますね。そういう時にクラスを使います。

h4.class1{ color:#0000ff; }
h4.class2{ color:#00ff00; }
h4.class3{ color:#ffff00; }

この3種類のスタイルを用意して、HTML ファイルには下のように記述します。

<h4 class="class1">とうきょうとっきょきょきゃきょきゅ?</h4>

とうきょうとっきょきょきゃきょきゅ?

<h4 class="class2">とうきょうとっきょきょきゃきょきゅ?</h4>

とうきょうとっきょきょきゃきょきゅ?

<h4 class="class3">とうきょうとっきょきょきゃきょきゅ?</h4>

とうきょうとっきょきょきゃきょきゅ?

クラスを使うことで、1つのタグに複数のスタイルを適用できましたね。
書き方は、タグ名の後に、ピリオド(.)を入れてからクラス名を記述します。このピリオド(.)を忘れないように。HTML ファイルは、タグ名の後にスペースを入れてから、 class="クラス名" です。

(css file) タグ名.クラス名{ プロパティ:値; }
(html file) <タグ class="クラス名">〜</タグ>

クラス名は自分で適当に考えてかまいません。上記の例の場合、わかりやすいようにこのようにすればいいでしょう。

h4.blue{ color:#0000ff; }
<h4 class="blue">とうきょうとっきょきょきゃきょきゅ?</h4>

これで後から見たときに、このクラスは青色のスタイルだなってわかりますね。


次に、クラスを使って、複数のタグに同じスタイルを適用する方法です。
この場合は、タグを指定しないで、クラスにスタイルを指定します。このように記述します。

.red{ color:#ff0000; }

これで、色のプロパティを持つタグについては全てこのスタイル(赤色)を適用することが出来ます。

<h4 class="red">とうきょうとっきょきょきゃきょきゅ?</h4>

とうきょうとっきょきょきゃきょきゅ?

<hr class="red">


見出しも罫線も赤色になりました。

※Netscape では罫線の色は表示されません。

CSS を記述するとき、クラス名の前のピリオド(.)を忘れないでね。これがないとブラウザがタグ名と勘違いして、おいおいそんなタグ知らんぞってことになっちゃうからね。

(css file) .クラス名{ プロパティ:値; }
(html file) <タグ class="クラス名">〜</タグ>

ちなみに、気づいた方もいるでしょうが、この複数のタグに同じスタイルを適用する方法は、前のページで勉強した、タグ タグ{ プロパティ:値;}と結果は同じですね。

h4 hr{ color:#ff0000; }

こうすれば、見出しも罫線も赤色になります。


1つのタグに複数のクラスを適用することもできます。

(css file)
hr{ color:#080 }
.w450{ width: 450px; }
.h20{ height: 20px; }
.fuchsia{ color: #f0f; }
(html file)
<hr>
<hr class="w450">
<hr class="w450 h20">
<hr class="w450 h20 fuchsia">





クラス名とクラス名の間を半角スペースで区切ることで、複数のクラスを1つのタグに適用しています。