複数のスタイルシートを使い分ける


複数のテーブルに各々異なったスタイルシートを使い分けたり、複数のリンク部にスタイルシートを使い分けたりします。 本格的にスタイルシートを使っていこうという時には便利な方法です。


TOPページに戻る   文字サイズを変えるには Control キーを押しながらマウスのスクロールホイールを回してください
クラス分けをした使いやすいスタイルシートの書き方       

ここまでのやり方では、リンク部とかテーブルとかブロックごとに、すべて同じ表示になってしまいます。
同じリンク部でも、黒いバックに白い文字を浮かばせたり、緑のバックに赤い文字を浮かばせたり、変化を 付けたいことも有ります。
『どこに』をきめ細かく指定できるようにしていきます。

『どこに』を細かく分けて指定
『どこに』の部分をクラス分けします。例えばリンク部であれば、
  • A を「1組、2組、3組・・・」とか「a組、b組、c組・・・」とか「赤組、白組、青組・・・」 何でもかまいません。自分で好きな名前を付けてクラス分けします。
  • a,b,c・・とアルファベットで分ける場合は、 A の後に .a(ドットa) .b .c と書いてクラス分けを指示します。
  • 赤組、白組、青組・・であれば、 A の後に .red .shiro .oa 等と書いてクラス分けを指示します。
  • 実際には、単純な数字とか、重複した名前は、自分でも間違えやすいですし作動しない環境もありますので避けるべきです。

次のような書き方をします。
<STYLE TYPE="text/css">
<!--
A {font-size:10pt}
A.a {font-size:10pt; color:red;}
A.b {font-size:11pt; color:green;}
A.c {font-size:10pt; color:blue;}
-->
</STYLE>

これでクラス分けができましたので、後は本文でどの A タグが何組かを記入していきます。
a組は class="a" b組は class="b" ・・・と書きます。
これを<A>の中に入れ<A class="a">〜</A>等と書いていきます。
<A class="a">〜</A>と書くとA.a { }で指示した内容が反映され、
<A class="b">〜</A>と書くとA.b { }で指示した内容が反映されます。
<A>〜</A>のようにクラス分けを指示していない場合は A { }で指示した内容が反映されます。

もう少し効率のいいクラス分け方法
上の指示方法は「 A のb組」とか「DIV のred組」と言った指示方法ですが、単純に「a組」「b組」「shiro組」・・・ といった指示の仕方もできます。
「b組」であれば『.b 』を使い、 .b {font-size:11pt; color:green;}
「赤組」であれば 『.red 』を使い、.red {font-size:11pt; color:green;} といった指示方法になります。

このように<HEAD>タグの中で指示をしておくと、本文中ではいろんなタグにこの効果を与えることができます。
例えば<TD class="b">〜</TD>でも使えますし、
<DIV class="b">〜</DIV>でも使えます。
どちらにも .b {font-size:11pt; color:green;} で指示した内容が反映されます。

TOPページに戻る 前に戻る 順番に次を見ていく