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

■ ID による設定

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

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

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">


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

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