- 追加された行はこの色です。
- 削除された行はこの色です。
[[CSS]] > CSSの基本
#contents
* CSSのバージョン [#if8fc919]
CSSのバージョンには、
- CSS1
- CSS2、CSS2.1
- CSS3
等がある。
しかし、CSSファイルには「バージョン」を指定する記法がないので、指定したCSSの反映はブラウザの対応状況に依存する。
* CSSの書き方 [#x9e6ccae]
** セレクタ、プロパティ、値 [#x32aff80]
CSSは、
- セレクタ
- プロパティ
- 値
という３つの要素で見た目を指定する。
p { color: red; }
- この場合、「p」がセレクタ、「color」がプロパティ、「red」が値となる。
- セレクタは、HTMLタグ名やユーザーが指定した文字列を指定できる。
- セレクタの後に、「{」「}」で囲って、プロパティと値の対を記述する。
- プロパティと値は、「:」で区切る。
- 値の末尾に「;」を付ける。
- 「;」の後に続けて次のプロパティと値の対を記述できる。
** コメント [#tcdbeb1f]
CSSではコメントを「/*」と「*/」で囲む。
/* コメント */
- C言語のコメントと同様。
- コメントは複数行にわたってもOK。
- コメントの中にコメントを記述する入れ子にはできない。
* CSSの適用方法 [#he276d06]
** CSSの指定 [#zb995cd5]
XHTMLに適用するCSSを指定する方法は、４つある。
- 「link」、「@import」で、別ファイルのCSSを呼び出す方法が良い。
- 直接XHTMLに書き込む「style」の使用は望ましくない。
*** link要素 [#m30a356f]
#code(css){{
<link rel="stylesheet" type="text/css" href="css/style.css" />
}}
*** @import [#ce6d28fe]
#code(css){{
<style type="text/css">
@import "css/style.css"
</style>
}}
*** style要素 [#cc6f539c]
#code(css){{
<style type="text/css">
p { margin: 15px; }
</style>
}}
*** style属性 [#bfbdaf6d]
#code(css){{
<p style="margin: 15px;">テキスト</p>
}}
** CSSの文字コード [#caa76e51]
「link」や「@import」で読み込むCSSファイルの先頭行に「@charset "…";」で文字コードを記述しておく。
#code(css){{
@charset "UTF-8";
}}
日本語ページの場合は、
- UTF-8
- Shif_JIS
- EUC-JP
等の文字コードが指定される。
あくまでもCSSファイルで使用する文字コードの指定であり、XHTMLの文字コードとは関係ない。
XHTMLと別の文字コードでも問題ないが、特に理由がなければXHTMLの文字コードと同じにしておく。
** CSSのメディアタイプ [#w937a923]
CSSを適用するメディア（デバイス、ソフトウェア）を、「メディアタイプ」によって指定することができる。
カンマ区切りで並べて、複数のメディアタイプを同時に指定できる。
メディアタイプを指定しない場合は、CSSがすべてのメディアに適用される。
| メディアタイプ | デバイスやソフトウェア |h
| all | すべてのメディア |
| screen | 一般的なパソコンのモニタ |
| projection | プロジェクター・映写機 |
| tv | テレビ・テレビゲーム機など |
| handheld | 携帯端末（PDA・携帯電話）など |
| tty | 固定ピッチフォントで表示される端末 |
| print | プリンタ（印刷プレビューなどを含む） |
| speech | 音声読み上げ（音声ブラウザなど） |
| braille | 点字ピンディスプレイなど |
| embossed | 点字プリンタなど |
*** XHTMLのlink要素でメディアタイプ指定 [#p549212e]
- パソコンのモニターやプロジェクターに適用するCSSの指定
#code(css){{
<link ref="stylesheet" type="text/css" href="css/screen.css" media="screen, projection" />
}}
- テレビ、テレビゲーム機に適用するCSSの指定
#code(css){{
<link ref="stylesheet" type="text/css" href="css/tv.css" media="tv" />
}}
- プリンターなどの印刷メディアに適用するCSSの指定
#code(css){{
<link ref="stylesheet" type="text/css" href="css/print.css" media="print" />
}}
- 携帯電話に適用するCSSの指定
#code(css){{
<link ref="stylesheet" type="text/css" href="css/handheld.css" media="handheld" />
}}
*** @importでメディアタイプ指定 [#uafaceac]
#code(css){{
@import url("projection.css") projection;
}}
*** @mediaでメディアタイプ指定 [#tdf26e61]
#code(css){{
@media print {
body { font-size: medium; }
}
}}
