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