テキストデータ型

CSS 宣言はすべて、プロパティと値のペアから成っています。値には、単一のキーワード、整数、関数、異なる型の組み合わせなど、プロパティに応じてさまざまなデータ型を含めることがあります。また、値には単位を持つものもあれば、持たないものもあります。このガイドでは、テキストデータ型の概要を説明します。より詳細な情報については、それぞれの値の型のページを参照してください。

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

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

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

css

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

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

css

.item {
  grid-area: content;
}

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

css

.item::after {
  content: "これがコンテンツです。";
}

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

定義済みキーワード値

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

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

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

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

css

.box {
  float: left;
}

CSS 全般の値

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

initial: プロパティの初期値として指定された値を表します。
inherit: 要素の親から継承されたプロパティの計算値を表します。
unset: プロパティが継承されているかどうかによって、 inherit または initial のどちらかの働きをします。
revert: 親から継承している場合は継承した値に、ユーザーエージェントのスタイルシート（またはユーザースタイルが存在する場合はユーザースタイル）で設定された既定値に、プロパティをリセットします。
revert-layer: カスケードレイヤーのプロパティの値を、前回カスケードレイヤーの要素と一致する CSS ルール内のプロパティの値にロールバックします。このキーワードを使用したプロパティの値は、現在のカスケードレイヤーのターゲット要素にルールが指定されていない場合と同様に再計算されます。

URL

<url> 型は関数記法を使用し、 URL である <string> を受け取ります。これは絶対 URL と相対 URL のどちらでも構いません。例えば、背景画像を記載したい場合は、次のどちらでも使用できます。

css

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

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

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

定義済みキーワード値

CSS 全般の値

URL

関連情報