記述方法

ウィキペディア小見出し辞書

記述方法

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/06/18 17:01 UTC 版)

「Cascading Style Sheets」の記事における「記述方法」の解説

ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱うことも可能である（ただし一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。 以下のCSS断片を例にとる。 p#id { color: #ff3300 } { から } までの部分を宣言ブロックという p#id をセレクタ（選択子）といい、スタイルが適用される対象をしめす 宣言ブロックとセレクタを合わせて規則集合という color: #ff3300 部分を宣言という 宣言の内、: より前（上例では color ）をプロパティ（特性）という 宣言の内、: より後（上例では #ff3300 ）を値という 上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ: 値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、: 、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また ; で区切ることにより宣言を並べて書くことができる。 上例は HTML 文書に適用する場合、「 id という ID を持った p 要素の文字色を赤 FF(=255) 、緑 33(=51) 、青 0 にせよ」という指定を意味する。 color: #ff3300;width: 35% color: "#0033ff";width: '53%' このような宣言があったとき、後者二つは " や ' を付したために不正である。なぜなら、" や ' で囲ったものは文字列として扱われ、color プロパティが取りうる色の値（ #rrggbb 、rgb([0-255], [0-255], [0-255]) 、または、 black や red などのキーワードなど）ではないからである。また、 p#id { color: #ff3300 }p#id { font-size: 24px } は、 p#id { color: #ff3300; font-size: 24px } と等価である。; は前者のように宣言をセレクタに一つずつ書いてあるのを、ひとつのセレクタのブロックで記述するときに宣言を分けるのに使う。そのため、必ずしも宣言に ; をつけるのを強制するものではない。 セレクタは、実装レベルの高いブラウザならばどの属性であっても CSS を適用することが可能であり、この場合 ID に関する属性セレクタであるので、#id は [id="id"] と等価である。セレクタの簡単なマッチングが可能である。そのほかHTMLタグに対する適用、文書構造からみた子・兄妹構造へ適用するセレクタ、更にはリンクや動的な表現・言語に関する疑似クラス( :link 、:hover 、:lang )などがある。