CSS 値と単位

• <custom-ident>
• <ident> として定義済みのキーワード
• <string>
• url()

テキストデータ型は、引用符で囲まれた文字の並びである <string> と、引用符で囲まれていない文字列、すなわち「CSS 識別子」である <ident> のどちらかです。 <string> は単一引用符か二重引用符のどちらかで囲まれます。仕様書で <ident> または <custom-ident> として挙げられている CSS 識別子は、引用符で囲んではいけません。

CSS の仕様では、ウェブ開発者が定義できる値には、アニメーションのキーフレームやフォントファミリーの名前、グリッドエリアなどがあり、これらは <custom-ident> または <string> またはその両方の形式で記述します。

ユーザーが定義するテキスト値のうち、引用符があってもなくてもよい箇所では、仕様書には <custom-ident> | <string>のように記してあります。これは、例えばアニメーション名のように、引用符が任意だということです。

@keyframe validIdent {
  /* ここにキーフレーム */
}
@keyframe 'validString' {
  /* ここにキーフレーム */
}

引用符で囲んではいけないテキスト値もあります。たとえば grid-area の値は <custom-ident> なので、もし content という名前のグリッドエリアがあれば、それは引用符なしで書きます。

.item {
  grid-area: content;
}

いっぽう、 <string> のデータ型、たとえば content プロパティの文字列値には引用符が必要です。

.item::after {
    content: "This is my content.";
}

どんな名前でも (絵文字を含んでいるものでも) 一般的には作れますが、識別子については none、unset、 initial、inherit にはできず、先頭を数字や二重ダッシュにすることもできません。また、一般的に CSS のそのほかの定義済みキーワードを使用することは避けるのが好ましいです。詳しくは <custom-ident> と <string> のリファレンスページを参照してください。

定義済みキーワードは、特定のプロパティ用に仕様で定義されているテキスト値です。これらのキーワードは CSS 識別子でもあるので、引用符なしで使用します。

CSS の仕様書や MDN のプロパティページで、CSS プロパティの値の構文を見ると、そこに書けるキーワードは次のような形式で列挙されているでしょう。以下の値は、float で使用できる定義済みキーワードです。

left | right | none | inline-start | inline-end

こうした値は引用符なしで使用します。

.box {
    float: left;
}

プロパティ用に仕様で定められている定義済みキーワードのほかに、すべての CSS プロパティで使える CSS 全般のプロパティ値として、initial、inherit、unset があります。これらは既定値への戻し方を明示するために使用します。

initial キーワードは、そのプロパティの初期値として指定された値を表します。inherit キーワードは、その要素の親要素のプロパティで計算された値を表し、親の値を継承します。

unset キーワードは、そのプロパティが継承されているか否かによって、inherit または initial のいずれかと同じ動きになります。

revert という 4 つめの値が Cascade Level 4 の仕様で追加されましたが、いまのところブラウザーの対応状況は好ましくありません。

url() 型は関数記法を使用し、 URL である <string> を受け取ります。これは絶対 URL または相対 URL です。例えば、背景画像を読み込みたいときには以下のどちらの使い方でもできます。

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

url() の引数は引用符があってもなくてもかまいません。引用符をつけない場合には、<url-token> と同様に解釈され、特定の文字のエスケープを行う必要があるなど、独自の要件があります。詳しくは url() を参照してください。

• <integer>
• <number>
• <dimension>
• <percentage>

整数は 1 桁以上の 0 から 9 の十進数で、1024、-55 など該当します。整数は + や - を先頭に付けることができますが、記号と整数の間に空白を開けないでください。

<number> は実数を表します。小数点以下の小数部はあってもなくても構いません。例えば 0.255、128、-1.2 が該当します。数値にも + や - の記号を先頭に付けることができます。

<dimension> は、<number> に単位が付いたものです。例えば 45deg、100ms、10px が該当します。付けた単位の識別子は大文字小文字が区別されません。数値と単位の間には、空白やその他の文字を入れないでください。例えば、1 cm は無効です。

CSS では、以下のものを表すために寸法を使います。

• <length> (距離の単位)
• <angle>
• <time>
• <frequency>
• <resolution>

以下の節で、これらについて説明します。

長さの単位

長さ (距離) の単位がプロパティの値として使用できるとき、これを <length> 型と呼びます。CSS の長さには、相対的な長さと絶対的な長さの 2 種類があります。

相対的な長さの単位は、他のものを基準に長さを表します。例えば、em はその要素のフォントの大きさを基準とする値で、vh はビューポートの高さを基準とする値です。

絶対的な長さの単位は物理的な長さであり、インチやセンチメートルなどと決まっています。そのため、これらの単位の多くは、印刷などの固定サイズの媒体への出力に向いています。たとえば、 mm は物理的なミリメートルで、センチメートルの 1/10 です。

長さの値を使用する場合、その長さが 0 なら単位をつける必要はありません。そうでないときには、単位は必須で、大文字小文字は区別せず、値の数値部分の直後に空白をはさむことなく付けなければなりません。

角度の単位

角度の値は <angle> 型で表され、以下の値を受け付けます。

時間の単位

時間の値は <time> 型で表されます。時間の値を含めるときは、単位 -- the s か ms -- の指定が必要です。以下の値を受け付けます。

周期の単位

周期の値は <frequency> 型で表されます。以下の値を受け付けます。

1Hz は 1hz や 1HZ とも表記でき、一秒あたり一周となります。

解像度の単位

解像度の単位は <resolution> 型で表されます。これらは、CSS のインチ、センチメートル、ピクセルに収まるドット数を示すことで、画面などの視覚表現におけるドット 1 つの大きさを表します。以下の値を受け付けます。

<percentage> は他の値の割合を表す型です。

パーセント値は、常に長さなどの他の量に対する相対的な値です。パーセントにできるプロパティごとに、パーセントが参照する量も定義されています。この量は、同じ要素の別のプロパティの値であったり、祖先要素のプロパティの値であったり、包含ブロックの測定値であったり、何か他のものであったりします。

例えば、ボックスの width をパーセントで指定した場合、ボックスの親要素で計算された幅を参照するパーセントになります。

.box {
  width: 50%;
}

一部のプロパティでは、2 つの型のいずれかの寸法を受け入れることがあります。<length> または <percentage> といった具合です。この場合の許容値は、<length-percentage> のように組合わせ単位として仕様書で詳解しています。他に取りうる組み合わせは以下の通りです。

• <frequency-percentage>
• <angle-percentage>
• <time-percentage>

• <color>
• <image>
• <position>

色

<color> の値は要素機能 (背景色など) の色を指定します。これは CSS 色モジュールで定義されています。

画像

<image> の値は、CSS で使用できる各種すべての画像を指定します。これは CSS 画像の値と置換要素モジュールで定義されています。

位置

<position> 型は位置取りできる領域内におけるオブジェクトの 2D 位置を定義します。例えば、コンテナ要素内の背景画像がこれにあたります。この型は background-position として解釈されるために、CSS の背景と境界の仕様書 で定義されています。

• calc()
• min()
• max()
• clamp()
• toggle()
• attr()

関数記法は、 CSS でより複雑な型を表現したり、特殊な処理を呼び出すことができる値の型です。この構文は、関数名の直後に左括弧 ( 、関数記法の引数、右括弧 ) と続きます。関数は複数の引数を取ることができ、CSS のプロパティ値と同様の書式になります。

括弧内のホワイトスペースは許容されますが、任意です。(ただし、min()、max()、clamp() 関数については、各ページ内の空白に関する注意事項を参照してください。)

rgba() のように、古い関数記法の中にはカンマを使用するものもあります。しかし、カンマは一般的にリスト内の項目を区切るためにのみ使用されます。引数の区切りにカンマを使用するとき、カンマの前後に空白を入れるかどうかは任意です。