▼
デフォルトのスタイルシートの設定
▼
HTMLの基本構造
▼
HTMLのツリー構造と親要素・子要素
▼
スタイルシートの設定方法
▼
コメント・コメントアウトについて
▼
スタイルシートの書式
▼
スタイルの優先順位
▼
セレクタの設定方法
▼
スタイルの継承
▼
URLの記述方法
▼
DTDとブラウザでの表示モード
■ セレクタの設定方法
セレクタとはスタイルを適用する対象を指定するものです。
セレクタの指定方法にはいくつかの種類があり、
利用する状況によって使い分けが出来るようになっています。
主な物は下記の通りです。(他にもあります)
- タグにスタイルを設定
- 任意の範囲にスタイルを設定
- タグの相関関係でスタイルを設定
- 擬似クラス・擬似要素
1 タグにスタイルを設定
要素名 {プロパティ:値 } 1つのタグに設定する場合
要素名,要素名 {プロパティ:値 } 複数のタグに設定する場合
例
h1 {color:#cccccc}
この方法は、タグの要素名をセレクタにします。
複数のタグに同じスタイルを設定する場合は要素名をカンマ「,」で区切ります。
|
IE4 |
IE5 |
IE5.5 |
IE6 |
NN4 |
NN4.7 |
N6.2 |
|
○ |
○ |
○ |
○ |
○ |
○ |
○ |
◆ このページのTOPへ ◆
2 任意の範囲にスタイルを設定
・要素名.クラス名 {プロパティ:値 } <要素名 class="クラス名"></要素名>
・要素名#id名 {プロパティ:値 } <要素名 id="id名"></要素名>
・.クラス名 {プロパティ:値 } <要素名 class="クラス名"></要素名>
・#id名 {プロパティ:値 } <要素名 id="id名"></要素名>
例
.aka {color:#red} <b class="aka">内容</b>
スタイルにクラスやidという識別子を振っておき、
必要に応じてclass属性やid属性で適用する方法です。
複数の要素に対して同じスタイルを適用したり、比較的限定された範囲
にスタイルを適用する時などに利用します。
クラスではピリオド「.」に続けてクラス名を、idではシャープ「#」
に続けてid名を指定します。
クラス名とid名は半角英数字、ハイフンを使って自由に名前をつけられますが、
Netscapeでは始めの1文字目を数字にすると、認識しないようなのでクラスやid名の
始めの1文字目には数字をつけないようにした方が良いでしょう。
ピリオドやシャープの前に要素名を指定すると、指定されたタグでのみ有効になります。
要素名が指定されていない場合は、どのタグからも呼び出すことができます。
W3Cの定義によると、idは1つのHTML文書内では1度しか呼び出すことができません。
現状ではidでも複数回呼び出すことができますが、正しい使い方ではないので注意してください。
|
IE4 |
IE5 |
IE5.5 |
IE6 |
NN4 |
NN4.7 |
N6.2 |
|
○ |
○ |
○ |
○ |
○ |
○ |
○ |
◆ このページのTOPへ ◆
3 タグの相関関係でスタイルを設定
親要素 子要素 {プロパティ:値}
例
p b {background-color:#0000ff}
HTMLのツリー構造を利用して、その相関関係でスタイルを設定します。
ある親要素に含まれる特定の子要素であるタグに対してスタイルを設定する場合、
親要素のあとに、半角スペースで区切って対象の子要素を記述します。
たとえば、p要素の中に含まれるb要素に対してスタイルを設定したとすると、
li要素などに含まれるb要素にはスタイルが適用されません。
|
IE4 |
IE5 |
IE5.5 |
IE6 |
NN4 |
NN4.7 |
N6.2 |
|
○ |
○ |
○ |
○ |
○ |
○ |
○ |
◆ このページのTOPへ ◆
4 擬似クラス・擬似要素
要素名:擬似クラス(または)擬似要素 {プロパティ:値}
例
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
|
要素の表示上の最初の1行(ブロックレベル要素にのみ指定可能)
|
:first-letter
|
要素の最初の1文字(一部のブロックレベル要素のみに指定可能)
|
: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にも対応。
|