このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSの値と単位

記事Jan. 19th,2019
Jun. 27th,2021
CSSで使用できる値の種類と基本データ型の一覧
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

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)”を値として使用することができます。

説明
initialCSS Cascading and Inheritance Level 3 で追加 初期値を使用する
inherit 継承値を使用する
unsetCSS Cascading and Inheritance Level 3 で追加 既定で継承されるスタイルは継承値、継承されないスタイルは初期値を使用する
revertCSS Cascading and Inheritance Level 4 で追加 ユーザー・エージェント、もしくはユーザーの既定値を使用する

CSSの関数

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

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

width: calc(100% - 20px);

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

仕様書

定義されている仕様書

基本データ型の一覧

文字列

データ型 説明
<custom-ident>CSS Values and Units Module Level 3 で追加 制作者定義の識別子
<dashed-ident>CSS Values and Units Module Level 4 で追加 明示的に制作者定義の識別子
<string> 文字列
<url> URL

数値

データ型 説明
<integer> 整数
<number> 実数
<percentage> パーセンテージ
<ratio>CSS Values and Units Module Level 4 で追加 比率

数量

データ型 説明
<length> 長さ
<angle>CSS Values and Units Module Level 3 で追加 角度
<time>CSS Values and Units Module Level 3 で追加 時間
<frequency>CSS Values and Units Module Level 3 で追加 周波数
<resolution>CSS Values and Units Module Level 3 で追加 画素密度

その他

以下は“CSS Values and Units Module”以外で定義されたデータ型のうちよく使用されるものです。

データ型 説明
<color>
<image> 画像
<position> 位置
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク