CSSの値と単位

CSSのプロパティの値

CSSの値には“テキスト形式のデータ型(Textual Data Types)”と“数値形式のデータ型(Numeric Data Types)”の2種類に分けることができます。

テキスト形式のデータ型

プロパティごとに定義されている意味を持ったキーワード(定義済キーワード)や文字列(“<string>”値)、URL(“<url>”値)が含まれます。

数値形式のデータ型

大きさや量、位置などを表すために使用される数字(“<number>”値)やパーセント値(“<percentage>”値)、長さ(“<length>”値)などの単位がついた数量が含まれます。

また、プロパティごとに使用が可能な値はCSSの仕様書で定義されていますが、その定義の方法によって以下の4通りに分けることができます。

プロパティごとにあらかじめ定義されているキーワード値

ほとんどのプロパティには値として使用可能な意味を持ったキーワードが定義されています。例えば、“white-space”プロパティでは“normal”や“pre”、“nowrap”などいくつかのキーワードが定義されています。

基本データ型

多くのプロパティで使用される汎用的な値は“基本データ型(basic data type)”として定義されています。基本データ型には文字列を表す“<string>”値や長さを表す“<length>”値などがあり、これらは“<”と“>”で囲んだキーワードで表現されます。

他のプロパティに定義されている値

プロパティによっては他のプロパティの値として定義されている値の構文を使用できることがあります。例えば、“font”プロパティは“font-style”プロパティで定義されている“normal”や“italic”などがそのまま使用できます。他のプロパティの値が使用可能な個所では使用可能な値を、例えば“<'font-style'>”などのように、そのプロパティの名前を“<'”と“'>”で囲んで表します。

他所で定義された値

プロパティによっては他所で定義された値の構文が使用できることがあります。例えば、“border-width”プロパティや“outline-width”プロパティなどは“<line-width>”として定義されている値のセットを使用できます。

共通キーワード

CSSのすべてのプロパティはそのプロパティに定義されているものとは別に“共通キーワード(CSS-wide keywords)”を値として使用することができます。

CSSの関数

CSSにはいくつもの“関数表記(Functional Notations)”が定義されており、計算などによるより複雑な値や特別な処理を表現することができます。

関数は関数の名前に続く括弧(“(”と“)”)に囲まれた引数からなります。

width: calc(100% - 20px);

関数にはすべてのプロパティで使用できる“toggle()”関数、数値形式のデータ型で計算のために使用できる数学関数、“<url>”値や“<color>”値などのデータ型として使用できる関数、プロパティごとに定義されている関数があります。

仕様書

定義されている仕様書

<custom-ident>
<dashed-ident>
<string>
<url>
<integer>
<number>
<percentage>
<ratio>
<length>
<angle>
<time>
<frequency>
<resolution>

文字列

数値

数量

他のデータ型

以下は“CSS Values and Units Module”以外で定義された基本データ型以外のデータ型の一部です。