▼GHP講座3.8 − CSSスタイルシートを覚える
◎ よいデザインのホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するCSS一覧◇◆◇
クラス属性、擬似クラスの使い方
※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。
★クラス属性を使ってみよう！
ヘッダ記述式で、同じ要素に別々の効果を付ける場合の方法を解説します。
ほぼ全てのタグ要素で使うことができる
「class属性」を使うのです。
この「class属性」を使うことによって細かくCSSを割り付けることができます。
.
全頁で解説した書き方「タグ要素{(CSS)}」を「タグ要素
.クラス属性名{(CSS)}」にするだけです。
「.(ドット)クラス属性名」を付加すれば、その特定要素の特定クラスに効果を適用できます。
「.クラス属性名{(CSS)}」とすれば不特定要素の特定クラスにだけ効果を適用できます。
.
言葉だけでは分からないので実例を出してみます。赤色部分がクラス属性です。
<style type="text/css">
div{width:500px;border:3px double #fcc;}
div.center{text-align:center;}
div.right{text-align:right;}
p.pr1{margin:0px 20px;color:#b00;}
p.pr2{margin:0px 20px;color:#080;}
</style>
<body>
<div>クラス無しのdiv要素タグ</div>
<div class="center">クラス「center」div要素タグ：中央寄せ</div>
<div class="right">クラス「right」div要素タグ：右寄せ</div>
<p>クラス無しのp要素タグ</p>
<p class="pr1">クラス「pr1」p要素タグ：赤色</p>
<p class="pr2">クラス「pr2」p要素タグ：緑色</p>
</body>
↓ 各要素のCSSは、クラス属性のCSSに継承されます ↓
クラス無しのdiv要素タグ
クラス「center」div要素タグ：中央寄せ
クラス「right」div要素タグ：右寄せ
クラス無しのp要素タグ
クラス「pr1」p要素タグ：赤色
クラス「pr2」p要素タグ：緑色
このように、クラス属性を使うことにより同じタグにも別々の効果を与えることができるのです。
「.クラス名{(CSS)}」→
「#ID名{(CSS)}」、
「class="クラス名"」→
「id="ID名"」
このようにしてもいけますが、同じＩＤはページに１つしか使用してはいけませんので参考までに。
★擬似クラスを使おう！
「クラス」と異なり「擬似クラス」というものがあります。
これは非常に便利でa要素タグ等を自由に操ることができます。
→ 「マウスポインタがリンク上を通過すると色を変える」ことができます。
.
使い方は簡単で
「タグ要素{(CSS)}」→
「タグ要素:擬似クラス名{(CSS)}」にするだけです。
擬似クラスが対応しているタグは非常に少ない上、ブラウザ毎に対応状況が異なります。
なので、ほとんどが対応している「a要素タグ」のみを対象にして解説していきます。
.
言葉だけでは分からないので実例を出してみます。
下記の赤色部分がクラス属性を用いている場所です。
<style type="text/css">
a{color:#008;}
a:link{} /* まだ表示したことのないリンク */
a:visited{} /* すでに表示したことのあるリンク */
a:active{color:#0f0;} /* ユーザが選択中のリンク */
a:hover{color:#f00;} /* マウスが上に乗ってる状態 */
</style>
<body>
<a href="#">リンク</a>
</body>
↓ マウスを乗せてみて下さい ↓
クラスと併用して
「タグ要素.クラス属性名:擬似クラス名{(CSS)}」でも使用できます。