Section 5 : クラスとID

これまでは要素に対してスタイルを指定してきたが,要素ごとにいちいち記述するのはめんどうだ。同じ属性ならば,一つのパターンを指定しておいて,<H1> でも <P> でも任意の要素で使うことができる。


クラス

ここでのクラスとは,HTML の要素それぞれを任意にグループ分けするもの。そのクラスに特定のスタイルを結びつける。クラスは名前を付けて定義しておく。 <STYLE>...</STYLE> には,クラス名の先頭にピリオド「.」をつけて書いておく。

.クラス名 { 属性: 値; }

以下の例では,クラス style1 には赤,style2 には緑の文字色を定義している。

<STYLE TYPE="text/css">
<!--
.style1 { color: red; }
.style2 { color: green; }
-->
</STYLE>

本文中でクラスを指定する書式は,要素に続いてクラス名を記述するが,先頭にピリオドは付けない。

<要素 CLASS=...>

次のように本文中に書くと,要素の種類に関係なくクラスに対して指定されたスタイルが適用される。

<H4 CLASS=style1>クラスを使ってみる</H4>
<DIV CLASS=style2>ここは緑で表示されます。</DIV>
<DIV CLASS=style1>ここは赤で表示されます。</DIV>

クラスを使ってみる

ここは緑で表示されます。
ここは赤で表示されます。

クラスについては,First step CSS の「クラスによる識別」を参照されたい。

ID

ID は,HTML の要素につける名前で,文書中で同じ名前を与えることは許されない。この ID も,クラス同様,スタイルを適用させるのに使うことができる。

#ID名 { 属性: 値; }

ここでは,簡単な例をあげるにとどめる。

<HEAD>
<TITLE>タイトル</TITLE>
<STYLE TYPE="text/css">
<!--
.style3{
    color: aqua;
    line-height: 150%;
}
#test { color: green; }
-->
</STYLE>
</HEAD>
<BODY>
<P CLASS=style3>クラス "style3" のスタイルは水色,行送り 150% です。</P>
<P CLASS=style3>クラスは,ひとつの文書中にいくつ同じものに属する要素があっても構いません。</P>
<P ID=test>この段落の ID は "test" で,これはひとつの文書中にひとつだけです。</P>
</BODY>


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版