HOME > オンラインマニュアル
> ホームページ作成ガイド > CSS編 > 基本ルール－セレクタを使い分ける－
ホームページ作成ガイド
CSS編
基本ルール-セレクタを使い分ける-
1. タグごとにスタイルを統一
|
| |
|
タグごとにスタイルを設定していく方法です。
最も単純な指定方法といえるでしょう。
この場合、あるタグで囲まれた部分は常に設定した通りのスタイルになります。
|
|
例えば、
H2 {
color: #00FF00 ;
text-decoration: underline ;
} |
上のように設定した場合、Ｈ２タグで囲まれたテキストは常に青色でかつ下線が引かれます 。 |
|
2. 複数のタグでスタイルを設定
|
| |
|
１つのスタイル設定を複数のタグに対して設定する場合に行う方法です。
|
H1,H2,H3 { color: #808080 ; }
H1,H3 { bgcolor:#0069FF ; } |
書式は、上の例のように、タグとタグの間に","（ピリオド）を入れます。
この場合ですと、Ｈ１からＨ３まで同じグレーで統一されますが、背景が色付きになるのはＨ１とＨ３タグで囲まれた部分だけになります。
このように、複数のタグにまとめてスタイル設定をしたい時に使います。
|
|
3. タグ同志の相関関係でスタイルを設定
|
| |
|
ＨＴＭＬのタグはお互いにツリー（木）状の相関関係を構成しています。
これは、文章の論理的構造を表すというＨＴＭＬ本来の役割によるものです。
このツリー構造において上位に位置しているタグを親要素、下位に位置している要素を子要素と呼んでいます。
子要素は親要素のスタイル設定を受け継ぎます。（スタイルの継承）
ただし、これには例外があって継承することで不具合が出るような指定（背景画像の指定など）は継承されません。
この性質を利用してスタイル設定を行います。
|
4. 状況に応じてスタイルを設定
|
| |
|
クラスやＩＤといった特定の識別子を用いて、任意の場所で必要なスタイル設定を呼び出すよう設定します。
|
|
<SCRIPT TYPE="text/css">
.クラス名 ｛ 属性 ： 値 ； ｝
#ＩＤ名 ｛ 属性 ： 値 ； ｝
</SCRIPT> |
上の例のように、クラス名の前には"."(ピリオド)を付けます。
"#"(シャープ)を付ければＩＤを指定したことになります。
実際に使用するときは、
<DIV CLASS="クラス名">このようにして</DIV>
<DIV ID="ＩＤ名">使用します。</DIV> |
このように、任意のタグの中で指定します。
タグ .クラス名 ｛ 属性 ： 値 ； ｝
タグ＃ＩＤ ｛ 属性 ： 値 ； ｝ |
この場合は、それぞれ設定したタグでしかクラスやＩＤを呼び出せません。
|
|
5. 任意の範囲でスタイルを設定
|
| |
|
参照済みのリンクの色を変えるなど、文章中に記述されていない現象を表現するために使用します。
擬似クラスという名称で呼ばれます。 現在主要なブラウザが対応しているのは４種類だけです。
|
:link ：Ａタグで囲まれたリンクで未参照のもの
:visited ：Ａタグで囲まれたリンクで参照済みのもの
:active ：マウスボタンが押されるなどでアクティブ状態
:hover ：マウスカーソルが重なっている |
上のように、要素名と擬似クラスを":"(コロン)でつないで記述します。
|
|
