|
例えば、<body>タグは、一つのHTMLファイルの中で、一度しか出てきませんが
<p>タグなどは、複数回出てくる可能性が高いですよね。
以下のように、ＣＳＳで<p>タグの色を指定してしまうと、全ての<p>タグが
同じ色になってしまいます。
CSSファイル ----------------------------------------------------
p {
color: #cccccc;
}
---------------------------------------------------------------
そこで登場するのが、「class」属性です。この属性を使えば、あらゆるタグに、自由に名前をつけることが可能です。ブログのHTMLファイルを見るとよくわかりますが、この「class」属性は何度も登場しています。
例えば、以下のように、阪神とロッテという文字が<p>タグで囲まれているとします。
HTMLファイル --------------------------------------------------
<p>阪神</p>
<p>ロッテ</p>
---------------------------------------------------------------
以下のように、<p>タグの色を阪神カラーの黄色(#FFCC00)に指定してしまうと
ロッテの文字まで黄色になってしまいます。
CSSファイル ----------------------------------------------------
p {
color: #FFCC00;
}
---------------------------------------------------------------
それでは困りますので、阪神の文字は黄色に、ロッテの文字は黒にしてみましょう。
「class」属性を使用して、<p>タグに、オリジナルの名前をつけてみましょう。
記述方法は、class="好きな名前"となります。
HTMLファイル --------------------------------------------------
<p class="tigers">阪神</p>
<p class="marines">ロッテ</p>
---------------------------------------------------------------
"tigers"という<p>タグと、"marines"という<p>タグが出来上がりました。
このように、１つのタグに対して、ＣＳＳで異なった装飾を施したい場合は
class属性を使って、２つのスタイルを作ってあげましょう。
では、この２つの<p>タグを、ＣＳＳで装飾してみましょう。
"tigers"のテキストは黄色(#FFCC00)に、"marines"のテキストは黒色(#000000)に
指定します。
CSSファイル ----------------------------------------------------
.tigers {
color: #FFCC00;
}
.marines {
color: #000000;
}
---------------------------------------------------------------
ここで注意して頂きたいのは、「class」属性を使用して、オリジナルの名前を作った場合
必ずセレクタの先頭に「．（ドット）」をつけてください。
こうして、同じ<p>タグでも、別々の装飾をすることができました。
|
