CSS quotes property

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 &#12300;
U+300D &#12301;
U+300E &#12302;
U+300F &#12303;

英語の引用符

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

Quotes in English
引用符 Unicode 文字参照 実体参照
U+2018 &#8216; &lsquo;
U+2019 &#8217; &rsquo;
U+201C &#8220; &ldquo;
U+201D &#8221; &rdquo;

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

<!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