CSS
"Cascading Style Sheets" の略。HTML から見た目に関する情報を分離するために考案された規格で、HTML のそれぞれのタグに対して、表示する際の設定を細かく指定できる。フォントサイズや配置の微妙な調整はもちろんのこと、インライン要素をブロック要素として扱うような大幅な変更も行えるため、Web ページの柔軟性が大幅に向上する。また、スクリプトでパラメータを変更することも可能なため、Ajax を実現する基盤ともなっている。
HTML で CSS を利用する場合、別ファイルに定義を記述してそれを読み込む方法と HTML 内で直接定義する方法の 2 つがある。それぞれ指定するタグも異なるので注意。
別ファイルを読み込む場合は、 link タグを使う。
これに対して、 HTML に直接埋め込む場合は、 style タグを使う。
CSS 非対応のブラウザに対応するため、上記のように CSS 定義を HTML コメントで囲うのが望ましい。
その他、複数の CSS の使い分けなどの機能もあるが、割愛(^^;。
IE の独自仕様として、以下の書式で CSS 定義の中に JavaScript を含めることができる。
CSS2 の position:fixed などを IE で再現するためには、どうしても必要になる。
書式
HTML で CSS を利用する場合、別ファイルに定義を記述してそれを読み込む方法と HTML 内で直接定義する方法の 2 つがある。それぞれ指定するタグも異なるので注意。
別ファイルを読み込む場合は、 link タグを使う。
<link rel="stylesheet" type="text/css" href="<ファイル名>">
これに対して、 HTML に直接埋め込む場合は、 style タグを使う。
<style type="text/css"> <!-- // CSS 定義 --> </style>
CSS 非対応のブラウザに対応するため、上記のように CSS 定義を HTML コメントで囲うのが望ましい。
その他、複数の CSS の使い分けなどの機能もあるが、割愛(^^;。
セレクタ
| セレクタ | マッチする条件 |
|---|---|
| * | すべての要素 |
| E | すべての E 要素 |
| E F | E 要素内部の F 要素 |
| E>F | E 要素の直下の F 要素 |
| E+F | E 要素の直後の F 要素 |
| E:first-child | E 要素の最初の子要素 |
| E:link | リンク先に訪問していない場合 |
| E:visited | リンク先に訪問済みの場合 |
| E:active | マウスクリックなどで要素がアクティブになった場合 |
| E:hover | マウスカーソルが要素上にある場合 |
| E:focus | 要素が入力フォーカスを持っている場合 |
| E:lang(c) | 言語が c の場合の E 要素 |
| E[attr] | attr 属性を持つ E 要素 |
| E[attr="value"] | attr 属性の値が value である E 要素 |
| E[attr~="value"] | attr 属性が空白で区切られたリストであり、 そのひとつが value である E 要素 |
| E[attr|="value"] | attr 属性がハイフンで区切られたリストであり、 その先頭が value である E 要素 |
| E.value | class 属性が value である要素 E(HTML の場合) |
| E#value | id 属性が value である要素 E |
IE の独自仕様
IE の独自仕様として、以下の書式で CSS 定義の中に JavaScript を含めることができる。
expression(<JavaScriptの式>)
CSS2 の position:fixed などを IE で再現するためには、どうしても必要になる。
キーワード
参考
2008年03月30日(日) 23:06:15 Modified by sourcewalker