CSS quotes

quotesはHTMLの <q> 要素で引用符に使う文字を設定するCSSプロパティです。quotesの使い方をサンプルを交えてご紹介します。

スタイルシート属性 quotes は、引用符の引用記号（クオート記号）を指定する。

なお、<blockquote> 要素には影響を与えない。

構文

quotes : [open-quote close-quote]+ | none | inherit

quotesプロパティの値には、次のうちいずれかを指定する。

[ open-quote close-quote ]+: 引用符に使用する文字列の組（引用開始と引用終了）を1組以上指定する。
none: 引用符なし
inherit: 継承する

たとえば、引用符を [ と ] にする場合は、次のように属性値を指定する。

quotes: '[' ']'

引用符のペアを複数指定することで、入れ子になった引用符（引用の中の引用）を指定することもできる。

quotes: '[' ']' '{' '}'

使用例と表示サンプル

日本語の場合、引用符は「と」、入れ子の引用符は『と』である。この設定例を次に示す。

<p style="quotes: '「' '」' '『' '』'">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

引用符の属性を継承する場合の例を次に示す。

<p style="inherit">
<q>quotes <q>quotes in quotes</q> quotes</q>
</p>

quotes quotes in quotes quotes

none

引用符を表示させない例を次に示す。

<p style="quotes: none">
  <q>Good Morning!<q> said Bilbo.
</p>

Good Morning! said Bilbo.

日本語の引用符

日本語で一般的に使われる引用符を次に示す。

日本語の引用符
引用符	Unicode	文字参照
「	U+300C	「
」	U+300D	」
『	U+300E	『
』	U+300F	』

英語の引用符

英語で一般的に使われる引用符を次に示す。

Quotes in English
引用符	Unicode	文字参照	実体参照
‘	U+2018	‘	‘
’	U+2019	’	’
“	U+201C	“	“
”	U+201D	”	”

英語の引用符を設定する例を次に示す。

<!DOCTYPE html>
<html>
  <head>
    <title>The Hobbit</title>
    <style>
      :lang(en) {
        quotes: "\201C" "\201D" "\2018" "\2019"
      }
    </style>
  </head>
  <body>
    <p lang="en">
      <q><q>Good Morning!</q> said Bilbo.</q>
    </p>
    <p lang="ja">
      <q><q>よいお日和を。</q>とビルボがいいました。</q>
    </p>
  </body>
</html>

Good Morning! said Bilbo.

よいお日和を。とビルボがいいました。

参考文献

World Wide Web Consortium, “CSS Generated Content Module Level 3,” Nov. 2025
Web Hypertext Application Technology Working Group, “Named character references,” HTML Living Standard, Nov. 2025