CSS 値と単位

この記事は翻訳作業中です。

CSS 宣言はすべて、プロパティと値の組を含みます。プロパティによって、値は単純な整数やキーワードから、一連のキーワードや単位つき・単位なしの値などを含みます。CSS プロパティが受け付けるデータ型の組み合わせ -- 値と単位 -- があります。以下ではデータ型の大部分を概観します。より詳しい情報は、それぞれのデータ型のページを参照してください。

テキストのデータ型

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

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

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

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' { 
  /* keyframes go here */ 
}

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

.item {
  grid-area: content;
}

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

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

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

定義済みキーワード

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

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

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

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

.box {
    float: left;
}

CSS 全般での値

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

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

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

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

URL

<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-token> のように特定の文字のエスケープなどを行う必要があります。詳しくは <url> を参照してください。

数値データ型

整数

整数は1つ以上の十進数で、 0 から 91024-55 などです。整数は +- が先頭に付くこともあり、これらの記号と整数の間には空白はありません。

数値

<number> は実数をあらわします。それは小数点以下の小数部があるときとないときがあり、例えば 0.255128-1.2 です。実数も、+- の記号が先頭に付くことがあります。

寸法

<dimension> は、<number> に単位が付いたもので、例えば 45deg100ms10px です。付けられる単位の識別子は大文字小文字を区別しません。数値と単位の間には、空白やその他いかなる文字を入れることもできません。例えば 1 cm は正しくありません。

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

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

距離の単位

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

相対的な長さの単位は、ほかの何らかのものを基準にして長さを表します。たとえば、em は要素のフォントサイズを基準とする値ですし、vh はビューポートの高さを基準とする値です。

相対的な長さの単位
単位 基準とする値
em その要素のフォントサイズ
ex その要素のフォントの x-height
cap その要素のフォントの Cap height (大文字の名目上の高さ)
ch その要素のフォントにおける narrow グリフの平均文字送り幅で、“0” (ZERO, U+0030) のグリフで表される
ic その要素のフォントにおける full width グリフの平均文字送り幅で、“水” (CJK water ideograph, U+6C34) のグリフで表される
rem ルート要素のフォントサイズ
lh その要素の行幅 (line height)
rlh ルート要素の行幅 (line height)
vw ビューポートの幅の 1%
vh ビューポートの高さの 1%
vi 1% of viewport's size in the root element's inline axis.
vb 1% of viewport's size in the root element's block axis.
vmin 1% of viewport's smaller dimension.
vmax 1% of viewport's larger dimension.

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

絶対的な長さの単位
単位 名称 換算
cm センチメートル 1cm = 96px/2.54
mm ミリメートル 1mm = 1cm の 1/10
Q 1/4 ミリメートル 1Q = 1cm の 1/40
in インチ 1in = 2.54cm = 96px
pc パイカ 1pc = 1in の 1/16
pt ポイント 1pt = 1in の 1/72
px ピクセル 1px = 1in の 1/96

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

角度の単位

Angle values are represented by the type <angle> and accept the following values:

Unit Name Description
deg Degrees There are 360 degrees in a full circle.
grad Gradians There are 400 gradians in a full circle.
rad Radians There are 2π radians in a full circle.
turn Turns There is 1 turn in a full circle.

時間の単位

Time values are represented by the type <time>. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

Unit Name Description
s Seconds
ms Milliseconds There are 1,000 milliseconds in a second.

周期の単位

Frequency values are represented by the type <frequency>. It accepts the following values.

Unit Name Description
Hz Hertz Represents the number of occurances per second.
kHz KiloHertz A kiloHertz is 1000 Hertz.

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

解像度の単位

Resolution units are represented by the type <resolution>. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

Unit Description
dpi Dots per inch.
dpcm Dots per centimetre.
dppx, x Dots per px unit.

パーセント値

A <percentage> is a type that represents a fraction of some other value.

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

As an example, if you specify the width of an box as a percentage, it refers to the percentage of the box's parent's computed width:

.box {
  width: 50%;
}

Mixing percentages and dimensions

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. <length-percentage>. Other possible combinations are as follows:

Special data types (defined in other specs)

Color

The <color> value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

Image

The <image> value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

Position

The <position> type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  background-position and therefore specified in the CSS Backgrounds and Borders specification.

Functional notation

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

White space is allowed, but optional inside the parentheses.

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 4 編集者草案 Adds the vi, vb, ic, cap, lh and rlh units.
Adds the min(), max() and clamp() functional notation
Adds toggle()
CSS Values and Units Module Level 3 勧告候補 Adds calc()chremvwvwvmin, vmaxQ
CSS Color Module Level 4 草案 Adds commaless syntaxes for the rgb()rgba()hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
Adds color keyword rebeccapurple.
Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
Adds hwb()device-cmyk(), and color() functions.
CSS Color Module Level 3 勧告 Deprecates system-colors. Adds SVG colors. Adds the rgba()hsl(), and hsla() functions.
CSS Images Module Level 4 草案

Adds element(), image(), image-set(), conic-gradient()

CSS Images Module Level 3 勧告候補 Initial definition of image.
CSS Level 2 (Revision 1) 勧告
CSS Level 1 勧告 初回定義

関連情報