スタイルを反映させる方法
style sheet のclass&ID
スタイルに名前をつけましょう
スタイルシートを打ち込む前に、スタイルシートの設定パターンをお話します。
あるタグに、CSSの効果を反映させるには、いくつか方法があります。
特定タグに直接設定、CLASS属性を追加、要素内の子孫に設定、ID設定、等々。その種類は１０におよびます。
最初から全部を使うことはないでしょうし、全部が必要とも思えません。
そこで、抜粋して、４つの方法だけお伝えすることにしました。
話の意味がぴんとこないかもしれませんが、一度目を通しておくことをお勧めします。後のページで説明することがよくわかるはずです。
CSS側で設定するだけなので、簡単に使えるのが直接の設定。
サイトの中でよく使うデザインは、この方法で設定しておくと便利です。
例 pタグの文字色を青にしたいとき
p{
color : blue;
}
例のように設定すると、ｐタグで囲まれた文字は、青色となります。
CSSファイルでは、すべてこのように設定します。
selector ｛property： value；｝
適用の対象｛スタイル属性： その他；｝
（例では、改行しています）
適用の対象は、タグ要素にクラスなどをあわせた対象。
スタイル属性は、色やサイズなど、デザイン部分。
その他は、スタイル属性を変化させるための数値などの値。
例では｛｝の中にはcolorしか入っていませんが、
｛｝の中には、プロパティ：バリュー；の組み合わせが、いくつ入ってもかまいません。
少しずつ解説していきますね。
同じタグに対して、複数の設定を作るときや、タグを特定しない共通の設定を作るときにつかいます。使い勝手のいい設定方法です。
要素（対象とするタグ）を決めればきめたタグにしか適用されませんが、要素を省略すれば、どの要素でも利用できるクラスとなります。
例 pタグに設定。
１＞赤いバックに白い文字を出したい。
p.t1{
background-color: red;
color : white;
}
使う側
<p class="t1">t1の結果</p>
２＞黒い線で囲んで、大きな文字にしたい。
（要素を指定しない書き方）
.t2{
border : 1px solid black;
font-size : 18pt;
}
使う側
<p class="t2">t2の結果</p>
t1の結果
t2の結果
クラスで、要素を設定した場合は、要素に対しての設定になります。要素が違えば反映されません。
例では、pの要素に、t1という名前で文字の色を白、と背景色を赤に設定しています。これはｐにだけ適用されるということです。
仮に<div class="t1">試し</div>としても、t1の効果はありません。
逆にいえば、別の要素であればクラス名が同じでもかまわない。
同じ所に、複数の要素（タグ）を使う場合、名前を統一したほうが分かりやすくなります。
要素を指定しなかったときには、どの要素に対しても使うことができます。例では、t2をｐのクラスとして使ってますが、divやｔｄなどに使うこともできるのです。
一口メモ
CSSは、同じ要素を続けて設定してください。
ブラウザーによっては、要素が離れていると認識しない場合があります。
ｐを設定して、DIVを設定して、またｐの設定・・・これはアウトですよ。
クラスと似て非なるもの。それがＩＤです。
設定側には＃を用います。
例 ＞ 文字はトマト色。字間を２０pxにする
#mojima{
color : tomato;
letter-spacing : 20px;
}
使う側 ：spanに適用する場合
<span id="mojima">すんごーく伸びてます</span>
すんごーく伸びてます
一口メモ
一つのIDは、同じページでは一つの属性にしか使うことができません。
CLASSと使い分けましょう。
ここだけの話ですが、リンクタグにもＣＳＳを適用できるんです。
え？知ってましたんですか。（へんな日本語や）
aタグには、下の４つの状態があります。
link（通常リンク）
active（アクセス済みリンク）
visited（クリックした状態のリンク）
hover（マウスが上に乗った状態のリンク）
それぞれの状態に、異なる設定をしておくことで、変化のあるクリックが実現できるのです。
例 ＞ このサイトのlinl時と、hover時の設定です。
a : link{
text-decoration:none; color:blue;
}
a : hover {
text-decoration:underline; color:#ff0066;
}
どこかにリンクしています♪
一口メモ
text-decoration:none というのは、元々のリンク属性をチャラにするものです。いちど、みんな取り除いてから、新しい設定を組み込んでいます。
|
