CLASSを使ったスタイル指定

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

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

CLASS
基本的に１つのページ内でいくつかのタグに共通したスタイル指定をしたいときに使います。

<BODY>～</BODY>の内にあるタグに下記のようなclass名をつけたとします。

<DIV class="div1">項目１</DIV>
<DIV class="div1">項目２</DIV>
<DIV class="div1">項目３</DIV>

このclass名をつけたタグのスタイル指定を、<HEAD>～</HEAD>内でおこないます。

その際のスタイル指定は、

<STYLE>
.div1{ color : black; }
</STYLE>

という具合に、iclass 名の前に . 「ピリオド（ドット）」をつけてスタイル指定をします。

例えば、TABLEなどで使用するとその便利さがわかることと思います。

番号	内容	記号
番号	内容	記号
番号	内容	記号
番号	内容	記号
番号	内容	記号

このような表があった場合、スタイルシートの指定なしでソースを書き出すと、

<HTML>
<HEAD>
<TITLE>スタイルシートなし</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD width="50" height="30" bgcolor="#0000ff" align="right">
<FONT color="#ffffff" face="MS UI Gothic">番号</FONT>
</TD>
<TD width="150" height="30" bgcolor="#cccccc" align="left">
<FONT color="#000000" face="ＭＳＰ明朝"><B>内容</B></FONT>
</TD>
<TD width="50" height="30" bgcolor="#000000" align="center">
<FONT color="#ffffff">記号</FONT>
</TD>
</TR>
<TR>
<TD width="50" height="30" bgcolor="#0000ff" align="right">
<FONT color="#ffffff" face="MS UI Gothic">番号</FONT>
</TD>
<TD width="150" height="30" bgcolor="#cccccc" align="left">
<FONT color="#000000" face="ＭＳＰ明朝"><B>内容</B></FONT>
</TD>
<TD width="50" height="30" bgcolor="#000000" align="center">
<FONT color="#ffffff">記号</FONT>
</TD>
</TR>
<TR>
<TD width="50" height="30" bgcolor="#0000ff" align="right">
<FONT color="#ffffff" face="MS UI Gothic">番号</FONT>
</TD>
<TD width="150" height="30" bgcolor="#cccccc" align="left">
<FONT color="#000000" face="ＭＳＰ明朝"><B>内容</B></FONT>
</TD>
<TD width="50" height="30" bgcolor="#000000" align="center">
<FONT color="#ffffff">記号</FONT>
</TD>
</TR>
<TR>
<TD width="50" height="30" bgcolor="#0000ff" align="right">
<FONT color="#ffffff" face="MS UI Gothic">番号</FONT>
</TD>
<TD width="150" height="30" bgcolor="#cccccc" align="left">
<FONT color="#000000" face="ＭＳＰ明朝"><B>内容</B></FONT>
</TD>
<TD width="50" height="30" bgcolor="#000000" align="center">
<FONT color="#ffffff">記号</FONT>
</TD>
</TR>
<TR>
<TD width="50" height="30" bgcolor="#0000ff" align="right">
<FONT color="#ffffff" face="MS UI Gothic">番号</FONT>
</TD>
<TD width="150" height="30" bgcolor="#cccccc" align="left">
<FONT color="#000000" face="ＭＳＰ明朝"><B>内容</B></FONT>
</TD>
<TD width="50" height="30" bgcolor="#000000" align="center">
<FONT color="#ffffff">記号</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

と、おそらくこのようになるのでしょう。同じことを何度も繰り返し記述していて非効率です。

番号	内容	記号
番号	内容	記号
番号	内容	記号
番号	内容	記号
番号	内容	記号

これはclassを使って指定していますが、表示は上のものと全く同じです。
ところがソースを見てみると、とてもスッキリまとまっています。

<HTML>
<HEAD>
<TITLE>CLASSを使用</TITLE>
<STYLE>

</STYLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD class="td1">番号</TD>
<TD class="td2">内容</TD>
<TD class="td3">記号</TD>
</TR>
<TR>
<TD class="td1">番号</TD>
<TD class="td2">内容</TD>
<TD class="td3">記号</TD>
</TR>
<TR>
<TD class="td1">番号</TD>
<TD class="td2">内容</TD>
<TD class="td3">記号</TD>
</TR>
<TR>
<TD class="td1">番号</TD>
<TD class="td2">内容</TD>
<TD class="td3">記号</TD>
</TR>
<TR>
<TD class="td1">番号</TD>
<TD class="td2">内容</TD>
<TD class="td3">記号</TD>
</TR>
</TABLE>
</BODY>
</HTML>

◆ 有効的な利用方法

例えば、一つのページに上のような表がいくつもあったらどうでしょう？
数が多ければ多いほど、そのページに書かれるソースの量の差は広がっていきます。
複数のページに同じような表がいくつもある場合は、外部スタイルシートを使用すれば、サイト内に使われている全ての表を一発で指定することも可能です。

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