*使用方法*・・・のつづき

4-1.　クラス

ある部分にだけ特別なスタイルシートを設定したい場合に、「クラス」というテクニックがあります。
設定のしかた
セレクタの部分を「.（ドット）」＋「好きなクラス名」にします。

クラススタイルシートの呼び出しかた
そのスタイルシートを呼び出したい部分に、「class="（クラス名）"」と書きます。

何らかのタグで囲まれていればそのタグの属性として書き込めます。例：<H2 class="○○○">～</H2>
とくにタグがなければ<span class="○○○">～</span>　もしくは　<div class="○○○">～</div>で囲みます。
例）<H2>タグは基本的に赤(red)にするが、ある部分だけは青(blue)にする場合
<HTML>
<HEAD>
　<STYLE type="text/css">
　<!--
　H2  { color : red }
　.sp { color : blue }

　-->
　</STYLE>
</HEAD>
<BODY>
　<H2>シロフォン</H2>
　木琴の一種。中音～高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。
　<H2>マリンバ</H2>
　木琴の一種。低音～中音域。毛糸などで巻いた柔かめのマレットで、低音を響かせる。
　<H2 class="sp">グロッケンシュピール</H2>
　鉄琴の一種。鍵盤が小さく、高音域。マーチングバンド用に肩にかけるタイプもある。
　<H2>ビブラフォン</H2>
　鉄琴の一種。電動で共鳴管にとりつけたプロペラを回すことで、音をワンワンとうならせることができる。
</BODY>
</HTML>
↓
↓
↓
シロフォン

木琴の一種。中音～高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。

マリンバ

木琴の一種。低音～中音域。毛糸などで巻いた柔かめのマレットで、低音を響かせる。

グロッケンシュピール

鉄琴の一種。鍵盤が小さく、高音域。マーチングバンド用に肩にかけるタイプもある。

ビブラフォン

鉄琴の一種。電動で共鳴管にとりつけたプロペラを回すことで、音をワンワンとうならせることができる。


また、クラスは この性質を利用し、同じスタイルシートを適用したい部分には同じクラスを設定しておけば、
あとで一気に変更することができますので便利です。
例）
<HTML>
<HEAD>
　<STYLE type="text/css">
　<!--
　H2  { color : red }
　.mokkin { color : blue }  /* 木琴用スタイルシート */
　.tekkin { color : green }  /* 鉄琴用スタイルシート */

　-->
　</STYLE>
</HEAD>
<BODY>
　<H2>シロフォン</H2>
　<span class="mokkin">木琴</span>の一種。中音～高音域。硬目のマレットを使用することで、コロコロとした甲高い音を出すことができる。
　<H2>マリンバ</H2>
　<span class="mokkin">木琴</span>の一種。低音～中音域。毛糸などで巻いた柔かめのマレットで、低音を響かせる。
　<H2>グロッケンシュピール</H2>
　<span class="tekkin">鉄琴</span>の一種。鍵盤が小さく、高音域。マーチングバンド用に肩にかけるタイプもある。
　<H2>ビブラフォン</H2>
　<span class="tekkin">鉄琴</span>の一種。電動で共鳴管にとりつけたプロペラを回すことで、音をワンワンとうならせることができる。
</BODY>
</HTML>


また、あらかじめ意味をもって作られている「定義済みクラス」もあります。
たとえば、リンク<A HREF=～>専用のクラスに次の４つがあります。 
A:link    { }  /* リンク */
A:visited { }  /* クリック済みのリンク */
A:active  { }  /* 現在ジャンプ中のリンク */
A:hover   { }  /* リンクにマウスカーソルを当てたとき */
これを使えば、こんなことができます。 
A:link    { text-decoration : none; }  /* リンクの下線はひかない */
A:visited { text-decoration : none; }
A:active  { text-decoration : underline; }
A:hover   { text-decoration : underline; }  /* リンクにマウスカーソルを当てたとき下線があらわれる */
4-2.　ID属性

クラスとあまり変わりませんが、クラスは何回も使えるのに対し、IDは１回しか使えないという特徴があります。
設定のしかた
セレクタの部分を「#（シャープ）」＋「好きなID名」にします。

ID属性の呼び出しかた
そのスタイルシートを適用したい部分に、「id="（ID名）"」と書きます。
例）
<HTML>
<HEAD>
　<STYLE type="text/css">
　<!--
　#large { font-size:36pt; }
　#small { font-size:6pt; }

　-->
　</STYLE>
</HEAD>
<BODY>
　<div id="large">大きな文字</div>
　<div id="small">小さな文字</div>
</BODY>
</HTML>


このように、クラスやIDを使えば、かなり細かい設定が可能です。



Copyright (C) 7tag project dv