<string>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<string> は CSS のデータ型で、一連の文字列を表します。文字列は content, font-family, quotes など、数々の CSS プロパティで使用されます。

構文

<string> データ型は任意の数の Unicode 文字を、二重引用符 (") または単一引用符 (') で囲んで構成します。

多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の Unicode コードポイントで表現することもでき、この場合は前にバックスラッシュ (\) をつけます。例えば、 \22 は二重引用符を表し、 \27 は単一引用符 (')、 \A9 は著作権記号 (©) を表します。

重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 \\ は単一のバックスラッシュを生成します。

改行文字を出力するには、 \A または \00000A のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として \ でエスケープすると、コード内で文字列を複数行に渡らせることができます。

ただし、改行を行うためには、white-space プロパティに適切な値を設定する必要があります。

メモ: 文字参照 (  や — など) は、 CSS の <string> の中で使用することはできません。

例

有効な文字列の例

css

/* 単純な文字列 */
"この文字列は二重引用符で区切られています。"
'この文字列は単一引用符で区切られています。'

/* 文字のエスケープ */
"これは、エスケープされた二重引用符 \" を含む文字列です。"
"この文字列にもエスケープされた二重引用符 \22 があります。"
'これは、エスケープされた単一引用符 \' を含む文字列です。'
'この文字列にもエスケープされた単一引用符 \27 があります。'
"これは、エスケープされたバックスラッシュ \\ を含む文字列です。"

/* 文字列内の改行 */
"この文字列には\A内部に改行があります。"

/* 2 行にわたる文字列 (これら 2 つの文字列は同じ出力になります) */
"本当に長い\
素晴らしい文字列"
"本当に長い素晴らしい文字列"