CSS詳説（2）構文と基本データ型について

このカテゴリでは構文と値についての記述されています。

構文

トークン

まずはトークンの決まりごとについて。
プログラム言語に置いてトークンとは、コードの最小単位の語句のことで、ここでは字句レベルで、CSSスタイルシートはトークンのシーケンスで構成されると定義されています。
その後、具体的なトークンと定義が記述されています。

例えば、記号のところでバックスラッシュが使われているものは、バックスラッシュはエスケープです。バックスラッシュ以降の記号そのものをその記号として表します。つまりバックスラッシュは無いものとして見れば良いです。
コメント（COMMENT）は正規表現で書かれています。要は/**/を使いなさいということです。
#は#の後になんらか識別名を入れて記述することができるとなっています。これはつまりID名を表す時に使います。
#はHASHとなっており、シャープではないことに気づくはずです。id名をシャープと呼ぶ人が多いですが、ハッシュです。
ATKEYWORDは@識別名で記述可能ということですね。
数字はそのまま数字を記述すればよく、パーセンテージは数字の後に％をつけます。

キーワード

キーワードの記述はダブルクオテーションで囲まずに、そのままキーワードを記述します。
width: auto;が正しく、
width: “auto”;は間違いです。

ベンダー固有の拡張

ここはベンダープリフィックスの書き方です。以下の例のように識別名を（ダッシュ）または’_’（アンダースコア）で始めなさいということです。
例
-moz-box-sizing

注目すべき点としてダッシュのみではなく、アンダースコアも可能だということです。

-記号のことを通常はハイフンと読んだりしますが、プログラムではダッシュと呼ぶことも多いです。
通常はハイフン（マイナス）と同じ記号を使えば良いですが、正確にはそれぞれ違いがあります。
詳細はwikiを参照してください。

文字と活字ケース

CSSの構文は、大文字・小文字は区別されません。ただし、CSS以外でも使われる文字、id名やclass名、フォント名、URIのアドレスで使用される大文字・小文字は区別されます。
CSSにおいて、（要素名、クラス、およびセレクター内のIDを含む）識別子は、文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン（-）およびアンダースコア（_）のみを含むことができます。ただし、識別子は、数字、2つのハイフン、ハイフンの直後の数字で開始できないので注意しましょう。

@規則

@キーワードで始まる@規則は、「@」文字の直後に続き識別子そしてセミコロン（;）で終わります。
例

@import "subs.css";

ブロック

CSS記述の基本形で使われる波括弧の定義です。
ブロックは、左波括弧{で始まり、対応する右波括弧}で終わります。
例
p{color:red;}

規則集合、宣言ブロック、セレクター

規則集合は次の例のような形態となります。

セレクター{プロパティ:値;}

また記述になんらかの不都合（定義されてない記述があるなど）の場合は無視されます。

宣言とプロパティ

例

h1 { font-weight: bold }
h1 { font-size: 12px }
h1 { line-height: 14px }
h1 { font-family: Helvetica }
h1 { font-variant: normal }
h1 { font-style: normal }

以下と記述も可能です。

h1 {
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

コメントは「/*」で始まり、文字「*/」で終わります。
注意：コメントは入れ子にすることはできません。

値

整数値と実数値

値に数値を使用する場合、10進数の整数値「integer」または実数値「number」を使います。実数値は、整数値もしくは0個以上の数字の後に、ドット（.）が続き、1つ以上の数字が続くものです。つまり、「.1234」のように最初の0を省略することもできます。
整数値と実数値のどちらの場合も、「-」または「+」を直前に先行させて正の値、負の値を示します。
ただし多くのプロパティでは、負の値は使えない場合もあるので注意してください。

長さ

長さの値の形式は、小数点の有無に関係なく直後に単位識別子（たとえばpx、emなど）が続くものです。
0の場合は単位をつけてもつけなくてよいです。
負の値を使えるプロパティでもレイアウトを複雑にする場合もありますので、できるだけ他の方法を取るようにしましょう。
負の長さの値を許可しないプロパティにその値が設定された場合は無視されます。
長さの値がサポートできない場合、ブラウザは実効値で近似しなければなりません。

相対単位

相対単位を使うことでより効率的なCSSを記述することができます。
相対単位は以下の通りです。

em：: 関連するフォントの’font-size’
ex：: 関連するフォントの’x-height’

例

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */

「em」単位は、その単位が使われた要素の’font-size’プロパティの値に等しい大きさになります。
例えばpaddin:1emとするとその要素のfont-sizeと同じ大きさだけ、つまり1文字分の余白が空くことになります。
ただし、「em」がfont-sizeプロパティの値として使われた場合は、親要素のフォントサイズを参照することになります。
もし、ページ内でまだフォントサイズを指定していなければ、ブラウザーのデフォルト値、たいてい 16px が使われます。したがって、デフォルトでは 1em = 16px であり、2em = 32px となります。
この単位は縦または横の寸法に用いてもよいことになっています。

「ex」単位も「em」単位同様の使い方をします。その単位が使われた要素の’font-size’プロパティの値に等しい大きさになります。
ただし、「ex」がfont-sizeプロパティの値として使われた場合は、親要素のフォントサイズを参照することになります。
「ex」は、小文字の”x”の高さに等しくなることが多いことからこう呼ばれており「x」を含まないフォントに対しても定義することができます。
「em」は、大文字の”M”の大きさに等しくなることが多いことからこう呼ばれており「M」を含まないフォントに対しても定義することができます。

注意すべき点として、次の例があります。
“h1″が”body”要素の子であれば、”h1″の要素の’text-indent’の算出値は45pxではなく36pxとなります。これは子要素は特定の親の相対値を継承せずに、算出値を継承するからです。

body {
  font-size: 12px;
  text-indent: 3em;  /* すなわち、36px */
}
h1 { font-size: 15px }

子要素は特定の親の相対値を継承せずに、算出値を継承します。つまり、上の例では「text-indent: 3em」を継承するなら45pxになるはずですが、算出値を継承するため「text-indent:36px」を継承したのです。
この考え方は重要ですからしっかりと認識しておきましょう。

絶対単位

絶対長さ単位は、常に一定の値をとります。絶対単位は物理単位（in、cm、mm、pt、pc）とpx単位で構成されます。

in：: インチ―1inは2.54cmに等しい。
cm：: センチメートル
mm：: ミリメートル
pt：: ポイント―CSSで用いるポイントは1inの1/72に等しい。
pc：: パイカ―1pcは12ptに等しい。
px：: ピクセル―1pxは0.75ptに等しい。

ピクセル単位の場合、物理単位は、物理的な測定結果と一致するとは限らないことに注意する必要があります。あるいは固定単位が物理単位の場合、ピクセル単位は、デバイスピクセルの整数に変換されないことがあります。
ピクセル単位は正確には固定単位ではないことを知っておきましょう。

パーセント値

パーセント値の形式は、数字の直後に%が続くものです。
パーセント値は、たとえば長さなど、常に他の値に対する相対値となります。
一般に子要素は親の算出値を継承するので、次の例では、P要素の子が継承する’line-height’の値はパーセント値（120%）ではなく12pxとなります。

子要素は親の算出値を継承することは重要な概念ですからしっかりとマスターしましょう。

p { font-size: 10px }
p { line-height: 120% }  /* 'font-size'の120% */

URLおよびURI

プロパティ値でURIを指定するために用いる関数表記は、「url()」となります。
例

body { background: url("http://www.example.com/pinkish.png") }

URI値の形式は、’url()’関数の括弧内にURIを記述します。URIはシングルクォート（’）またはダブルクォート（”）でくくってもよく、また空白を任意に挿入してもよいことになっています。

引用符が無い例：

li { list-style: url(http://www.example.com/redball.png) disc }

リソースの絶対位置に依存しないモジュラー・スタイルシートを作成するために、相対URIを使用してもよいとされています。
例

body { background: url(images/yellow) }

カウンター

CSS カウンタの使用のためには、最初に、 0 を初期値として値をリセットしなければなりません。次に要素にカウンタの値を加えるため、 counter() 関数を使用します。
カウンターは、大文字・小文字区別な識別子で表されます。
例

<h1>sample</h1>
<p>AAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBB</p>
<p>CCCCCCCCCCCCCCC</p>

p {counter-increment: par-num}
h1 {counter-reset: par-num}
p:before {content: counter(par-num, upper-roman) ". "}

表示結果

色

色は、キーワードまたは数値RGBのいずれかで指定します。

色キーワードのリストは、aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellowです。この17色は以下の値を持つものです。

maroon #800000
red #ff0000
orange #ffA500
yellow #ffff00
olive #808000
purple #800080
fuchsia #ff00ff
white #ffffff
lime #00ff00
green #008000
navy #000080
blue #0000ff
aqua #00ffff
teal #008080
black #000000
silver #c0c0c0
gray #808080

数値色仕様においてRGB色モデルが使用されます。
以下の例はすべて同じ色を指定している：

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) }

16進表記のRGB値の形式は、’#’の直後に3桁または6桁の16進数のいずれかが続くものです。3桁のRGB表記（#rgb）は6桁の形式（#rrggbb）に変換することができます。これは桁を繰り返したものであって、0を付け足したものではありません。たとえば、#fb0は#ffbb00に展開されます。

関数表記におけるRGB値の形式は、’rgb(‘の直後に3つの数値のコンマ区切りリスト（3つの整数値または3つのパーセント値のいずれか）が続き、’)’が続くものです。整数値255は、100%、および16進数表記でFまたはFFに対応する。すなわち、rgb(255,255,255) = rgb(100%,100%,100%) = #FFF　です。空白文字は数値の前後に入れても良いです。

文字列

文字列は、シングルクォートまたはダブルクォートで記述されます。ダブルクォートは、エスケープされない限りダブルクォートの内部に出現することはできません。
文字列の例
“this is a ‘string'”
“this is a \”string\””
‘this is a “string”‘
‘this is a \’string\”
文字列は、改行を直接含むことはできません。文字列に改行を含むために、”\A”または”\00000a”のようなISO 10646で改行文字（U+000A）を表すエスケープを使用する。この文字は、CSSで”改行”の一般概念を表わします。
見栄えまたはその他の理由で、複数行にわたって文字列を分割することは可能ですが、そのような場合には改行文字自身をバックスラッシュ（\）でエスケープする必要があります。
例
a[title=”a not s\
o very long title”] {/*…*/}
a[title=”a not so very long title”] {/*…*/}

サポートしない値

ブラウザが指定した値をサポートしていない場合、その値を無視します。

例えば以下の例では、「display」プロパティに対して「run-in」値をサポートするブラウザは、最初の表示の宣言を受け入れてから、2番目のdisplayの宣言と値で”上書き”します。
もし「run-in」値をサポートしないブラウザは、最初の表示の宣言を処理し、2番目のdisplayの宣言を無視します。

  h3 {
    display: inline;
    display: run-in;
  }

CSSスタイルシートの表現

HTMLのSTYLE要素にスタイルシートが埋め込まれている場合、スタイルシートはその文書全体に摘要されます。

スタイルシートが別ファイルに存在する場合、ブラウザは、スタイルシートの文字エンコーディングを決定する際に、以下の（高いものから低いものへ）優先順位を遵守しなければなりません。

@charset規則を使用する場合は、スタイルシートの最初に設置しなければなりません。
その記述方法は次のようになります。
@charset “‘（小文字でバックスラッシュエスケープなしで）10文字、その直後にエンコーディング名、その直後に'”;