この翻訳は不完全です。英語から この記事を翻訳 してください。

CSS プロパティが受け付ける値と単位の共通のセットがあります。これらの多くは CSS Values and Units 仕様書で定義されています。この文書ではこれらを詳述し、どのように使用するかについてのいくらかの基本情報を加えています。詳細情報を読むには、それぞれの値の型のページを参照してください。

テキストのデータ型

Text data types can be a CSS Identifier, or a string. If something is a CSS Identifier it should be unquoted, whereas strings must be quoted. In specifications, values that can be defined by a web developer are listed as a <custom-ident>, which will behave like any other CSS Identifier. For example, the value of grid-area can be a <custom-ident>, so if we had a grid area named content we would use it without quotes:

.item {
  grid-area: content;
}

In comparison, a data type that is a <string>, such as a string value of the content property, must be quoted:

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

定義済みキーワード

These are keywords defined by the specification for that property. These keywords are also CSS Identifiers and therefore used unquoted. When viewing a specification, or the MDN property page for a property, you will see the allowable keywords listed in the following form. For example, the following values are those allowed for break-inside.

auto | avoid | avoid-page | avoid-column | avoid-region

Such values can be used like this:

.box {
    break-inside: avoid;
}

CSS-wide keywords

In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the keywords initial, inherit, and unset.

The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited.

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

A fourth value of revert was added in the Cascade Level 4 specification, but it does not currently have good browser support.

URLs

A <url> type uses functional notation, which accepts a <string> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

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

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

Note that the value for url() may be passed in unquoted, however it is then parsed as a <url-token>, which has extra requirements including the escaping of certain characters.

数値データ型

整数

An integer is one or more decimal digits, 0 through 9. An integer may be preceded by a + or - symbol.

数値

A <number> represents a real number, which may or may not have a fractional component, for example 1 or 1.2. Numbers may also be preceded by a + or - symbol.

距離

A <dimension> is a <number> with a unit attached to it, for example 10px. The unit identifier itself is an identifier. CSS uses dimensions to specify:

These are all covered in subsections below.

距離の単位

Where a distance unit is allowed as a value for a property, this is described as the <length> type. There are two types of lengths in CSS, relative and absolute.

Relative length units specify a length in relation to something else. For example em is relative to the font size on the element, vh is relative to the viewport height.

Summary of relative units
Unit Relative to
em Font size of the element.
ex x-height of the element's font.
cap Cap height (the nominal height of capital letters) of the element's font.
ch Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
ic Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
rem Font size of the root element.
lh Line height of the element.
rlh Line height of the root element.
vw 1% of viewport's width.
vh 1% of viewport's height.
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.

Absolute length units are fixed to some physical measurement. Many of these units are therefore more useful when output to a fixed size media, such as print. For example, cm is a physical centimetre.

Reference to absolute length units
Unit Name Equivalent to
cm Centimeters 1cm = 96px/2.54
mm Millimeters 1mm = 1/10th of 1cm
Q Quarter-millimeters 1Q = 1/40th of 1cm
in Inches 1in = 2.54cm = 96px
pc Picas 1pc = 1/16th of 1in
pt Points 1pt = 1/72th of 1in
px Pixels 1px = 1/96th of 1in

角度の単位

Angle values are represented by the type <angle>. It accepts the following values.

Unit Name Description
deg Degrees There are 360 degrees in a full circle.
grad Gradians Also known as gons or grades. 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 unit

Time values are represented by the type <time>. It accepts the following values.

Unit Name Description
s Seconds  
ms Milliseconds There are 1000 milliseconds in a second.

Frequency unit

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.

Resolution unit

Resolution units are represented by the type <resolution>. It represents the size of a single dot in a graphical representation 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.

Percentages

A <percentage> is a type that represents a fraction of some other reference 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 勧告 初回定義

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,