■ ID による設定

次に、ID による設定です。
ID による設定はクラスによる設定とほとんど同じ方法です。
クラスと違うのは、クラス名の前に書いたピリオド（．）をシャープ（＃）に変えることだけです。
ただし、ID は、１つの HTML 文書内（ページ）では１回しか使ってはいけないというややこしい決まりがあります。

※決まりは決まり。使ったからうまく表示されないかといえば、そうでもなかったりします。

ID の書き方は次のとおり。クラスの書き方と見比べて下さい。

(css file)
タグ名＃ID 名{ プロパティ:値; }または
＃ID 名{ プロパティ:値; }

(html file)
<タグ id="ID 名">〜</タグ>

先ほどのクラスと同じような CSS ファイル、HTML ファイルを用意します。結果は同じです。

#lime{ color:#00ff00; }

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

<h4 id="lime">となりのきゃくはよくきゃききゅうきゃくだ！</h4>

となりのきゃくはよくきゃききゅうきゃくだ！

<hr id="lime">

見出しも罫線もライム色になりました。

※Netscape では罫線の色は表示されないってば！

では、ID はどのような時に使えばいいのでしょうか。クラスがあればいらないような気がします。
下の例を見て下さい。

(css file)
hr{
　margin-left:80px;
　color:#808080;
　width:500px;
　height:10px;
}

(html file)
<hr>

左余白80ピクセル、灰色、長さ500ピクセル、高さ10ピクセルの線です。
このままだと、このスタイルが適用される全てのページの罫線が同じスタイルになります。
違う罫線を引くためにクラスを使います。

(css file)　.w450{ width:450px; }
(html file) <hr class="w450">

このクラス w450 を適用した <hr> タグだけは長さ450ピクセルの線になります。
<hr class="w450">（長さ450ピクセル）の線だけど色も変えたいと思ったときに ID を使います。

(css file) 　#green{ color:#008000; }
(html file) <hr class="w450" id="green">

このように ID を使えば、クラスによる設定を行い、さらに特定の部分だけを変更することができます。
ただし、実際にホームページを作る上では、あまり ID を使う必要性はないと思います。上記の例でも、別のクラスを設定すれば対応することが可能ですね。

(css file)　.w450-green{ width:450px; color:#008000; }
(html file) <hr class="w450-green">

あるいは、前のページで説明した１つのタグに複数のクラスを適用する方法も使えます。

(css file)　.green{ color:#008000; }
(html file) <hr class="w450 green">