IDを使ったスタイル指定

◆　IDを使ったスタイル指定

スタイルシートの指定では、タグにクラス名やIDをつけることによってより、簡素化したり、
より効率的にスタイル指定をすることができます。
また、TIMEを使うにあたっても大変重要な絶対不可欠なものでもあります。

ID
原則として１つのページ内に同じIDを重複させてつけてはいけません。

◆ 記述方法

ある一つのタグに下記のようなスタイル指定をしているとします。
<DIV style="color : black ; ">タイトル</DIV>

これと同じ表示をさせるために、このタグに下記のようなIDをつけたとします。
<DIV id="div1">タイトル</DIV>

このIDをつけたタグのスタイル指定を、<HEAD>～</HEAD>内でおこなうことによって、タグに直接スタイル指定をおこなったときと同じようにスタイルをかけることができます。

その際の記述は、下記のようになります。

<HEAD>
<STYLE>
#div1{ color : black; }
</STYLE>
</HEAD>

という具合に、id 名の前に # をつけ、スタイル指定をおこなうことによって、IDのつけられたタグにスタイルをかけることができます。

ただ、このままでは面白くないので、フィルター効果をかけて、下記のようなスタイル指定をしてみましょう。

<HTML>
<HEAD>
<TITLE>IDをつけてスタイル指定</TITLE>
<STYLE>
#div1{
color:white;
font-size:20px;
font-family:Impact;
text-align:center;
padding:5;
border:1 outset white;
width:90%;height:40;
FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=lightblue,endColorStr=darkslategray);
}
</STYLE>
</HEAD>
<BODY>
<DIV id="div1">No more need JavaScript!?</DIV>
</BODY>
</HTML>

すると、<BODY>～</BODY>内にある
<DIV id="div1">No more need JavaScript!?</DIV>の表示は、

No more need JavaScript!?

と、このようになります。

◆ 有効的な利用方法

例えば、複数のDIVというタグがページ内に多数存在し、DIVタグに<HEAD>～</HEAD>内でスタイル指定がされている際に、一つのDIVタグに関しては別のスタイル指定をしたいなどという場合に、大変有効であると思います。また、外部スタイルシートを用いてサイト内のスタイルを統一する際などにはもってこいではないかと思います。そして、TIMEを使用する際にはこのIDの指定が欠かせないものになってきます。

また、一度読み込んだ外部スタイルシートは、ユーザーのPC内にキャッシュとして保存されます。次回、同じ外部スタイルシートの指定をしているページを開こうとした際、ブラウザはいちいちそのスタイルシートをサーバーからダウンロードしようとはしません。キャッシュとして保存されているユーザーのPC内からその外部スタイルシートを持ってくるわけです。ダウンロードをせずに、自分のPC内から持ってくるのですから、アクセス時間はかからないに等しいと言えるでしょう。また、外部スタイルシートのファイルは、そのサイトの構成等にもよりますが、ほんのわずかにしかなりません。10KBもあったら、それはかなりち密なサイトといえるでしょう。
通常のスタイルシートの指定に加えて、このID名とクラス名をうまく使ってホームページを作成していくとデザインの統一された、軽いサイトを作成することができます。