CSS > CSSの基本

CSSのバージョン†

CSSのバージョンには、

しかし、CSSファイルには「バージョン」を指定する記法がないので、指定したCSSの反映はブラウザの対応状況に依存する。

↑

CSSの書き方†

↑

セレクタ、プロパティ、値†

CSSは、

p { color: red; }
↑

コメント†

CSSではコメントを「/*」と「*/」で囲む。

/* コメント */
↑

CSSの適用方法†

↑

CSSの指定†

XHTMLに適用するCSSを指定する方法は、４つある。

↑

link要素†

#code(css,nomenu){{

link rel="stylesheet" type="text/css" href="css/style.css" />
}}

↑

@import†

#code(css,nomenu){{

style type="text/css">
@import "css/style.css"

/style>
}}

↑

style要素†

#code(css,nomenu){{

style type="text/css">
p { margin: 15px; }

/style>
}}

↑

style属性†

#code(css,nomenu){{

p style="margin: 15px;">テキスト</p>
}}

↑

CSSの文字コード†

「link」や「@import」で読み込むCSSファイルの先頭行に「@charset "…";」で文字コードを記述しておく。

#code(css,nomenu){{
@charset "UTF-8";
}}

日本語ページの場合は、

あくまでもCSSファイルで使用する文字コードの指定であり、XHTMLの文字コードとは関係ない。
XHTMLと別の文字コードでも問題ないが、特に理由がなければXHTMLの文字コードと同じにしておく。

↑

CSSのメディアタイプ†

CSSを適用するメディア（デバイス、ソフトウェア）を、「メディアタイプ」によって指定することができる。
カンマ区切りで並べて、複数のメディアタイプを同時に指定できる。
メディアタイプを指定しない場合は、CSSがすべてのメディアに適用される。

メディアタイプデバイスやソフトウェア
allすべてのメディア
screen一般的なパソコンのモニタ
projectionプロジェクター・映写機
tvテレビ・テレビゲーム機など
handheld携帯端末（PDA・携帯電話）など
tty固定ピッチフォントで表示される端末
printプリンタ（印刷プレビューなどを含む）
speech音声読み上げ（音声ブラウザなど）
braille点字ピンディスプレイなど
embossed点字プリンタなど
↑

XHTMLのlink要素でメディアタイプ指定†

↑

@importでメディアタイプ指定†

#code(css,nomenu){{
@import url("projection.css") projection;
}}

↑

@mediaでメディアタイプ指定†

#code(css,nomenu){{
@media print {

 body { font-size: medium; }

}
}}

↑

セレクタ†

スタイルの適用対象を指定するのが「セレクタ」

↑

セレクタの種類†

名称セレクタ意味例
ユニバーサルセレクタ*すべての要素* { color: #000000; }
タイプセレクタEその要素（E）p { color: #222222; }
子孫セレクタE F親要素（E）に含まれる子孫要素（F）p em { color: #cc0000; }
子セレクタE > F兄要素（E）に含まれる直接の子要素（F）p > em { color: #cc0000; }
隣接セレクタE + F兄要素（E）の直後の弟要素（F）h1 + p { color: #222222; }
クラスセレクタ.classnameclass属性値が「classname」の要素.note { color: #ff0000; }
IDセレクタ#idnameid属性値が「idname」の要素#header { color: #006600; }
属性セレクタE[attr]要素（E）がその属性（attr）をもつ場合input[type] { padding: 2px; }
E[attr="value"]要素（E）がその属性（attr）と値（value）をもつ場合input[type="text"] { padding: 2px; }
E[attr~="value"]要素（E）がその属性（attr）をもち、属性値が空白文字区切りで複数指定されており、その属性値（value）が含まれている場合p[class~="moveto"] { color: #000066; }
E[attr｜="value"]要素（E）がその属性（attr）をもち、属性値が空白文字区切りで複数指定されており、その属性値（value）が前方一致で含まれている場合div[lang｜="en"] { font-size: small; }

セレクタの記号について

トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS