セレクタの使い分け

セレクタとはスタイルの効果を及ぼしたい範囲のことをいいます
つまりセレクタに対してスタイルを設定していきます


▼タグに対してスタイルを設定

タグ {属性 : 値 ; } もっともポピュラーな一つのタグに対してスタイルを設定する方法

タグ1,タグ2,タグ3 {属性 : 値 ; } タグをカンマ「 , 」で区切れば、複数のタグに対して同じスタイルを設定できます

親要素タグ 子要素タグ {属性 : 値 ; } 親要素に含まれる全ての子要素に対してスタイルを設定できます
 例えば、「 P blockquote{color:#ff0000;} 」と設定したら、
 「P」タグで囲まれている全ての「blockquote」に対しては色を赤くしますが、
 囲まれていない「blockquote」には効果が及びません


▼任意の範囲にスタイルを設定

・セレクタにはタグ以外にも、任意に設定できる「CLASS」と「ID」があります
 これはスタイル効果を使いたいところで、その「CLASS」や「ID」を呼び出して使うという方法です
 「CLASS」はピリオド「 . 」に続けて任意のクラス名を指定します
 「ID」はシャープ「 # 」に続けて任意のID名を指定します

 クラス名、ID名には半角の英数字とハイフンが使えますが、一文字目は数字にしないほうが良いです

・タグでの呼び出し方は、「 <タグ CLASS(or ID)="クラス名(or ID名)"></タグ> 」です

・「CLASS」と「ID」にはタグにつける形とつけない形の設定があります
 タグにつける形なら呼び出せるのはそのタグのみとなります
 タグにつけない形ならどのタグでも呼び出せます


・定義上は「CLASS」は何回でも呼び出せますが、「ID」は一つのhtmlの中で一回のみです
 しかし実際はIEでもNNでもどちらも何回でも呼び出せます
 個人的には、特別な理由がない限り「ID」は使わずに、「CLASS」を使うようにすることをお勧めします

・スタイルの設定ではこの「CLASS」が中心になるので、よく理解しておいてください
 以下に例をあげておきます

.red {color:#ff0000;} この場合、どのタグでも「CLASS="red"」とすればそのタグで囲んだ範囲は赤色になります
P.red {color:#ff0000;} この場合、「P」に「CLASS="red"」とすれば赤くなりますが、その他のタグでは効果は表れません

使い方としては「CSSファイル」などで「 .title{color:#ff0000;font-size:10pt;} 」などと設定しておき、
目立たせたいところに任意のタグで「CLASS="title"」と呼び出して使ったりします
セレクタをタグにするとデザイン上の関係などで設定したタグが使えなかったりすることがあります
しかし「CLASS」ならどんなタグにでも使え、サイトで統一したデザインを構成するときに大変役に立ちます