HOME >> スタイルシート > クラスとIDによるスタイル指定

　クラスとIDによるスタイル指定

■ クラスによる指定

1 .クラス名｛プロパティ：値；｝
2 タグ名.クラス名｛プロパティ：値；｝

前のページのスタイルシートの書き方では、タグに対してスタイルを適用しているので、この方法ではページ内のスタイルの設定されたタグはすべて同じ表示になります。例えば、Pタグの文字色を緑色に設定すればすべての段落の文字色は緑色になります。
しかし、場合によっては、一段落目は文字色を黒色にしてフォントの大きさを16ptで、二段落目は、文字色を青色にしてフォントの大きさを12ptなどというように、もっと細かくスタイルを設定したい場合がありますよね。これを可能にするのがクラスとIDです。それでは、まずクラスを使ったスタイルの適用法から説明します。

今までは、セレクタにタグを指定してスタイルを適用させてきましたが、クラスで設定する場合はセレクタにクラス名を記入します。そして、そのクラスのスタイルを適用させたいタグにclass属性をつけて値にそのクラス名を指定します。
例えば「deka 」というクラスの設定（フォントの大きさ100pt）を<H1>タグに適用するには、まずは、
.deka{ font-size : 100pt ; }のようにスタイルを記入します。
そして<H1 class="deka">というようにclass属性を使ってdekaの設定をH1に指定します。

クラス名は好きな名前を付けていいですがちょっとした約束事があります。まずは、.(ピリオド)を記入し、その後に半角の英数字と-(ハイフン）を使って名前をつけます。注意点として１文字目を数字にするとNNではクラスとして認識されないので, １文字目はアルファベットかハイフンにして下さい。（次に説明するIDも名前のつけ方は同じです。）

それと、ピリオドの前にタグ名を記入すれば、そのタグでクラス指定された場合のみ、スタイルが適用されます。P.test{ color:green ;}のようにスタイルを記述し場合、Pタグにtestのクラスを指定した場合は文字色は緑色になりますが、この場合、BODYタグにtestのクラスを指定しても文字色は緑色になりません。

サンプル - Microsoft Internet Explorer

見出しにiro1のクラスを適用

段落にiro1のクラスを適用

段落にiro2のクラスを適用

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
.iro1 { color:green;   }
.iro2 { color:orange;  }
  -->
</STYLE>
</HEAD>
<BODY>
<H2 class="iro1">見出しにiro1のクラスを適用</H2>
<P class="iro1">段落にiro1のクラスを適用</P>
<P class="iro2">段落にiro2のクラスを適用</P>
</BODY>
</HTML>

サンプル - Microsoft Internet Explorer

この段落はsize1のクラスを適用

この段落はsize2のクラスを適用

段落のみのクラス指定なので適用されません。

クラス指定されてない段落です。

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
P.size1 { font-size:16pt;   }
P.size2 { font-size:10pt;   }
  -->
</STYLE>
</HEAD>
<BODY>
<P class="size1">この段落はsize1のクラスを適用</P>
<P class="size2">この段落はsize2のクラスを適用</P>
<H5 class="size1">段落のみのクラス指定なので適用されません</H5>
<P>クラス指定されてない段落です。</P>
</BODY>
</HTML>

■ IDによる指定

1 #ID名｛プロパティ：値；｝
2 タグ名#ID名｛プロパティ：値；｝

クラス名では、名前の前にピリオドをつけましたが、それを＃(ハッシュマーク）にすることで、IDによるスタイルを設定できます。注意点として、W3Cによると1つのページ内で複数のタグに同じIDを使えないみたいです。しかし、現在のブラウザでは複数使っても適用されますが、将来的なことも考えて複数使うことは控えましょうね。

サンプル - Microsoft Internet Explorer

iroのIDを適用

sizeのIDを適用

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
<!--
#iro   { color:green;    }
P#size { font-size:30pt; }
  -->
</STYLE>
</HEAD>
<BODY>
<H3 id="iro">iroのIDを適用</H2>
<P id="size">sizeのIDを適用</P>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>