全部まるごとスタイルシート－セレクタの設定方法

ＣＳＳ　－スタイルシートリファレンス－　ブラウザの種類による対応状況などもプロパティごとに掲載！

バナーはダウンロード
してお使い下さい。

制作関連アイテム

フリーで使用できるフォントを収録（CD－ROM）。約１０００書体より、ポップ、エレガント、クール他、イメージでフォントを探す事ができます。ウェブ制作に便利な一冊です。

■　　ＣＳＳの基本

▼ デフォルトのスタイルシートの設定
▼ ＨＴＭＬの基本構造
▼ ＨＴＭＬのツリー構造と親要素・子要素
▼ スタイルシートの設定方法
▼ コメント・コメントアウトについて
▼ スタイルシートの書式
▼ スタイルの優先順位
▼ セレクタの設定方法
▼ スタイルの継承
▼ ＵＲＬの記述方法
▼ ＤＴＤとブラウザでの表示モード

■　セレクタの設定方法

セレクタとはスタイルを適用する対象を指定するものです。セレクタの指定方法にはいくつかの種類があり、利用する状況によって使い分けが出来るようになっています。主な物は下記の通りです。(他にもあります）

　　タグにスタイルを設定
　　任意の範囲にスタイルを設定
　　タグの相関関係でスタイルを設定
　　擬似クラス・擬似要素

１　　タグにスタイルを設定

要素名　{プロパティ:値 }　　１つのタグに設定する場合
要素名,要素名　{プロパティ:値 }　　複数のタグに設定する場合

　例　　 h1 {color:#cccccc}

この方法は、タグの要素名をセレクタにします。複数のタグに同じスタイルを設定する場合は要素名をカンマ「,」で区切ります。

	IE4	IE5	IE5.5	IE6	NN4	NN4.7	N6.2
	○	○	○	○	○	○	○

◆　このページのＴＯＰへ　◆

２　　任意の範囲にスタイルを設定

・要素名.クラス名　{プロパティ:値 }　<要素名 class="クラス名"></要素名>
・要素名#id名　{プロパティ:値 }　　<要素名 id="id名"></要素名>
・.クラス名　{プロパティ:値 }　　<要素名 class="クラス名"></要素名>
・#id名　{プロパティ:値 }　　<要素名 id="id名"></要素名>

　例　　 .aka {color:#red}　　<b class="aka">内容</b>

スタイルにクラスやidという識別子を振っておき、必要に応じてclass属性やid属性で適用する方法です。複数の要素に対して同じスタイルを適用したり、比較的限定された範囲にスタイルを適用する時などに利用します。

クラスではピリオド「.」に続けてクラス名を、idではシャープ「#」に続けてid名を指定します。クラス名とid名は半角英数字、ハイフンを使って自由に名前をつけられますが、 Netscapeでは始めの１文字目を数字にすると、認識しないようなのでクラスやid名の始めの１文字目には数字をつけないようにした方が良いでしょう。

ピリオドやシャープの前に要素名を指定すると、指定されたタグでのみ有効になります。要素名が指定されていない場合は、どのタグからも呼び出すことができます。 W3Cの定義によると、idは１つのＨＴＭＬ文書内では１度しか呼び出すことができません。現状ではidでも複数回呼び出すことができますが、正しい使い方ではないので注意してください。

	IE4	IE5	IE5.5	IE6	NN4	NN4.7	N6.2
	○	○	○	○	○	○	○

◆　このページのＴＯＰへ　◆

３　　タグの相関関係でスタイルを設定

親要素子要素 {プロパティ:値}

　例　　 p b {background-color:#0000ff}

ＨＴＭＬのツリー構造を利用して、その相関関係でスタイルを設定します。ある親要素に含まれる特定の子要素であるタグに対してスタイルを設定する場合、親要素のあとに、半角スペースで区切って対象の子要素を記述します。

たとえば、p要素の中に含まれるb要素に対してスタイルを設定したとすると、 li要素などに含まれるb要素にはスタイルが適用されません。

	IE4	IE5	IE5.5	IE6	NN4	NN4.7	N6.2
	○	○	○	○	○	○	○

◆　このページのＴＯＰへ　◆

４　　擬似クラス・擬似要素

要素名:擬似クラス(または)擬似要素 {プロパティ:値}

　例　　
　　　a:link {color:#0000ff}
　　　a:visited {color:#00ff00}
　　　a:hover {color:#ff9999}
　　　a:active {color:#ff0000}

◆　擬似クラス

要素名などで分類できない状態に対してスタイルを設定するために、擬似クラスというものがあります。擬似クラスは下記のようなものが定義されており、要素名に続けて記述します。

なお、上記の例のように、:hoverをリンクに設定する際は a:link、a:visited、a:hover、a:activeの順に設定する必要があります。

:link	まだ見ていないページへのリンク（キャッシュされていない）
:visited	すでに見たページへのリンク（キャッシュされている）
:hover	マウスカーソルが要素と重なっているとき（まだアクティブではない）
:active	リンク部分を選択した瞬間（クリックなど）
:focus	対象がクリックされたとき
:lang	スタイルを適用させる言語（言語コード）

	IE4	IE5	IE5.5	IE6	NN4	NN4.7	N6.2
:link	○	○	○	○	○	○	○
:visited	○	○	○	○	×	○	○
:active	○	○	○	○	×	×	○
:hover	○	○	○	○	×	×	○
:focus	×	×	×	×	×	×	○
:lang	×	×	×	×	×	×	×

　*　Macintosh版IE5はfocusにも対応。

◆　擬似要素

ツリー構造を構成する要素などで指定できない部分に対してスタイルを設定するために下記のような擬似要素が定義されています。要素名に続けて記述してください。

:first-line	要素の表示上の最初の１行（ブロックレベル要素にのみ指定可能）
:first-letter	要素の最初の１文字（一部のブロックレベル要素のみに指定可能）
:before	要素の直前に生成追加される内容（contentプロパティと併用）
:after	要素の直後に生成追加される内容（contentプロパティと併用）

	IE4	IE5	IE5.5	IE6	NN4	NN4.7	N6.2
:first-line	×	×	○	○	×	×	○
:first-letter	×	×	○	○	×	×	○
:before	×	×	×	×	×	×	○
:after	×	×	×	×	×	×	○

　*　Macintosh版IE5はfirst-line、first-letterにも対応。

ＬＩＮＫ

ＨＴＭＬの基礎

ホームページ作成の基礎知識について解説。ＨＴＭＬタグの辞書としても使えます。

コマンドプロンプト

コマンドプロンプト・ＤＯＳの関係についての解説やコマンドの目的別辞書。Windowsをもっと便利に。

ＸＭＬ

初心者でもわかるＸＭＬの基礎講座。ＸＭＬを使用した文書を作成しながらＸＭＬの基礎を学ぶ。

配色の話

色は印象を決定付ける重要な要素。彩度や明度の関係・色彩の基礎知識について掲載。

ＣＳＳ －スタイルシートリファレンス－ ブラウザの種類による対応状況などもプロパティごとに掲載！

■ ＣＳＳの基本

■ セレクタの設定方法

１ タグにスタイルを設定

２ 任意の範囲にスタイルを設定

３ タグの相関関係でスタイルを設定

４ 擬似クラス・擬似要素

◆ 擬似クラス

◆ 擬似要素

ＣＳＳ　－スタイルシートリファレンス－　ブラウザの種類による対応状況などもプロパティごとに掲載！

■　　ＣＳＳの基本

■　セレクタの設定方法

１　　タグにスタイルを設定

２　　任意の範囲にスタイルを設定

３　　タグの相関関係でスタイルを設定

４　　擬似クラス・擬似要素

◆　擬似クラス

◆　擬似要素