CSS quotes

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

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

構文

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 (2021) CSS Generated Content Module Level 3

Web Hypertext Application Technology Working Group (2022) "Named character references" HTML Living Standard