作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > スタイルシート > 設定パターン

スタイルを反映させる方法

style sheet のclass&ID

スタイルに名前をつけましょう

スタイルシートを打ち込む前に、スタイルシートの設定パターンをお話します。

あるタグに、CSSの効果を反映させるには、いくつか方法があります。
特定タグに直接設定、CLASS属性を追加、要素内の子孫に設定、ID設定、等々。その種類は10におよびます。

最初から全部を使うことはないでしょうし、全部が必要とも思えません。
そこで、抜粋して、4つの方法だけお伝えすることにしました。

話の意味がぴんとこないかもしれませんが、一度目を通しておくことをお勧めします。後のページで説明することがよくわかるはずです。

■ 直接設定

CSS側で設定するだけなので、簡単に使えるのが直接の設定。
サイトの中でよく使うデザインは、この方法で設定しておくと便利です。

例 pタグの文字色を青にしたいとき

p{
 color : blue;
}

例のように設定すると、タグで囲まれた文字は、青色となります。


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という名前で文字の色を白、と背景色を赤に設定しています。これはにだけ適用されるということです。

仮に<div class="t1">試し</div>としても、t1の効果はありません。


逆にいえば、別の要素であればクラス名が同じでもかまわない。
同じ所に、複数の要素(タグ)を使う場合、名前を統一したほうが分かりやすくなります。


要素を指定しなかったときには、どの要素に対しても使うことができます。例では、t2のクラスとして使ってますが、divtdなどに使うこともできるのです。

一口メモ
CSSは、同じ要素を続けて設定してください。
ブラウザーによっては、要素が離れていると認識しない場合があります。

を設定して、DIVを設定して、またpの設定・・・これはアウトですよ。

■ ID設定

クラスと似て非なるもの。それがIDです。
設定側にはを用います。

例 > 文字はトマト色。字間を20pxにする

#mojima{
 color     : tomato;
 letter-spacing : 20px;
}


使う側 :spanに適用する場合
<span id="mojima">すんごーく伸びてます</span>

すんごーく伸びてます

一口メモ
一つのIDは、同じページでは一つの属性にしか使うことができません。
CLASSと使い分けましょう。

■ aタグの設定

ここだけの話ですが、リンクタグにも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 というのは、元々のリンク属性をチャラにするものです。いちど、みんな取り除いてから、新しい設定を組み込んでいます。

<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする