最終更新日 
値の種類
CSSのプロパティごとに、指定できる値の種類は異なり、仕様で決められています。
CSS3では、各モジュールの仕様においてプロパティとその値が細かく規定されていますが、値の指定全般については、CSS Values and Units Module Level 3 で規定されています。
CSSの各プロパティには、あらかじめ設定されている「初期値」があります。
また、CSSのすべてのプロパティの値には「initial」というキーワードを指定することもできます。「initial」は、プロパティの初期値を示すキーワードです。
親要素のプロパティの値が子要素にもそのまま受け継がれることを「継承」といいます。プロパティによって、値を継承するものとしないものがあります。
また、CSSのすべてのプロパティの値には「inherit」というキーワードを指定することもできます。「inherit」は、親要素のプロパティの値を継承するキーワードです。
プロパティの値として、意味を表すキーワードが定義されている場合は、そのキーワードを値に使用できます。キーワードには引用符は付けません。キーワードの大文字と小文字は区別されません。
多くのプロパティでは、長さを表す値を指定できます。長さの値は「5px」「3em」のように、数値に単位を付けて指定します。単位の大文字と小文字は区別されません。
CSS3では、以下の単位が利用できます。
| 相対的な単位 | 意味 |
|---|---|
| em | 使用中の要素のフォントサイズを「1」とする単位。 |
| ex | 使用中の要素のフォントの「小文字のx」を「1」とする単位。 |
| px | ピクセルを「1」とする単位。 |
| ch | 表示に使われる要素のフォントの「0（ゼロ）」の幅を「1」とする単位。 |
| rem | ルート要素のフォントサイズを「1」とする単位。 |
| vw | 初期表示時のビューポートの幅を100とし、その1/100を基準とする単位。 |
| vh | 初期表示時のビューポートの高さを100とし、その1/100を基準とする単位。 |
| vm | vwまたはvhより小さい値を基準とする単位。 |
| 絶対的な単位 | 意味 |
|---|---|
| cm | センチメートル |
| mm | ミリメートル |
| in | インチ（1インチは約2.54cm） |
| pt | ポイント（1ポイントは1インチの1/72で、約0.35mm） |
| pc | パイカ（1パイカは12ptで、約4.23mm） |
「100%」のように、数値に「%」の単位を付けて、他の値に対する割合で示します。
整数または小数で指定します。「整数のみ指定できる」「負の数は指定できない」など、プロパティによっては制約が付く場合があります。
角度を示す値は、「45deg」のように、数値に単位を付けて指定します。グラデーションや変形に関するプロパティの値として使用されます。
| 単位 | 意味 |
|---|---|
| deg | 度。360度で円の1周を表します。 |
| grad | グラード。直角を100とし、400グラードで円の1周を表します。 |
| rad | ラジアン。円弧の長さを基準に角度を表し、2πラジアンで円の1周を表します。 |
| turn | ターン。1ターンで円の1周を表します。 |
値として時間を指定する場合は、「10s」や「15ms」のように、数値に単位を付けて指定します。単位は、秒を表す「s」、ミリ秒（1/1,000秒）を表す「ms」のいずれかを指定できます。
| 単位 | 意味 |
|---|---|
| s | 秒 |
| ms | ミリ秒（1/1,000秒） |
値としてURLを指定する場合は、「url()」のカッコ内に、URLを絶対パスまたは相対パスで記述します。URLは、引用符で囲んでも囲まなくてもどちらでも有効です。
background-image: url("images/back.gif");
background-image: url('images/back.gif');
background-image: url(images/back.gif);
background-image: url("http://www.example.com/images/back.gif");
background-image: url('http://www.example.com/images/back.gif');
background-image: url(http://www.example.com/images/back.gif);
CSS3では、以下のいずれかの方法で色を指定できます。
| 値 | 説明 |
|---|---|
| RGB値（16進数） | R、G、Bそれぞれの割合を16進数の2桁で示します。WEBセーフカラーは1桁に省略する事も可能です。 |
| RGB値（10進数） | R、G、Bそれぞれの割合を「0～255」までの10進数の数値で示します。 |
| RGB値（%） | R、G、Bそれぞれの割合をパーセント値で示します。 |
| RGBA値（10進数） | RGB値の10進数表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。 |
| RGBA値（%） | RGB値のパーセント表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。 |
| HSL値 | H（色相）S（彩度）L（明度）という3つの属性を使って色を表す方法です。H（Hue:色相）は、色を環状で表す色相環の角度を示す数値で指定します。0は赤、120は緑、240は青になります。S（Saturation:彩度）は、色の鮮やかさをパーセント値で指定します。100%は彩度がもっとも高い純色で、0%は彩度のない無彩色です。L（Lightness:明度）は、色の明るさを0%～100%までのパーセント値で指定します。50%は純色を示します。 |
| HSLA値 | HSLの表記に、透明度を示すアルファ値を加えたものです。アルファ値は「0.0～1.0」の範囲で示します。 |
| 基本色 | CSS3で定義されている、black、silver、gray、white、maroon、red、purple、fuchsia、green、lime、olive、yellow、navy、blue、teal、aquaの16色です。アルファベットの大文字と小文字は区別されません。 |
| 拡張色 | 一般的なブラウザが対応している「X11カラー」の色名です。CSS3カラーモジュールでは、X11カラー140色に加え、darkgray、darkslategray、dimgray、gray、lightgrey、lightslategray、slategrayの7色については、「gray」と「grey」のどちらのスペルでも利用できるようになり、合計147色のカラーネームが正式に定義されています。 |
| transparent | 完全な透過色を示します。rgba(0,0,0,0)と指定した場合と同じです。 |
| currentColor | 要素のcolorプロパティの値を示します。色の値を受け取る全てのプロパティで使用できます。colorプロパティ自身にcurrentColorを指定した場合は「color:inherit」として扱われ、親要素のカラー値を受け継ぎます。 |
color: #f00; color: #ff0000; color: rgb(255,0,0); color: rgb(100%,0%,0%); color: rgba(255,0,0,0.5); color: rgba(100%,0%,0%,0.5); color: hsl(0,255%,128%); color: hsla(0,255%,128%,0.5); color: red; color: darkred; color: transparent; color: currentColor;
