CSS文法

CSSスタイルシートの文法は？

CSSスタイルシート文法

CSSの文法は

　CSSでは、文法というよりは概念から派生した考え方といった方がいいかもしれません。

　CSSの文法にはCSSバージョン共通のものと特有のものがありますが、その概念からこの特有の定義があるからです。

　ここではCSS共通の文法について見ていく事にします(CSS 2.0の関連ページ訳ですが、CSS1をベースとしてCSS2で新たに加えられたものとCSS2で変更された箇所には注釈があります)。

※このページは、W3Cの4 CSS2 syntax and basic data types[英文]を当サイト管理人が2008年08月25日、意訳したものですが、構文解釈の違いや翻訳の違いが含まれるかもしれません。正式文書はW3C 各種仕様書(英語版)である事を予めご了承ください。

　以下の表はCSS2解説の表記方法(バッカス・ナウア記法／BN記法[Backus-Naur Form/BNF]または拡張バッカス・ナウア記法／EBN記法[Extended Backus-Naur Form/EBNF])の定義をまとめたもので元は「W3CのCSS2の仕様書ではこのような意味で使います」というリストなのですが、CSS解説記述の利便性の為に挙げておきます。

CSS解説記述方法の定義

*	0回以上
+	1回以上
\|	選択肢区切り
[ ]	グループ化

識別子IDENT	{ident}	p,div,h1,table...etc.
＠キーワード	@{ident}	@media,@include...etc.
文字列	{string}	属性値など
ハッシュ	#{name}	idセレクタなど
数値	{num}	属性値など
パーセント	{num}%	属性値など
寸法・サイズ	{num}{ident}	属性値など
URI	url${w}{string}{w}$	属性値など
URI	\|url${w}([!#$%&-?]\|{nonascii}\|{escape}){w}$	属性値など
UNICODE 範囲	U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO	<!--	HTMLコメント開始指定 CSSでは無視
CDC	-->	HTMLコメント終了指定 CSSでは無視
;	;	半角セミコロン
{	\{	半角左波カッコ
}	\}	半角右波カッコ
(	\(	半角左丸かっこ
)	\)	半角右丸かっこ
[	\[	半角左ブラケット
]	\]	半角右ブラケット
S	[ \t\n\f]+	半角スペース、タブ、改行が必須
w	[ \t\n\f]?	半角スペース、タブ、改行がオプション
コメント	\/\[^]\+([^/][^]\+)\/	CSSコメントアウト /* / / 単一行または複数行 */
関数	{ident}\(	pack()など
INCLUDES	?=	左辺が右辺の区切り文字などで列挙された複数の値のいずれかに一致
DASHMATCH	\|=	左辺が右辺のハイフンで繋げられた左側の文字に一致
デリミタ	上記規則に一致しないものは全てデリミタ(区切り文字)

>> CSS設定例

CSS/スタイルシート情報

【CSS共通定義】文法と記述方法

CSS1/CSS 1.0

CSS3

2004-2008-someday