CSS: quotes 引用符を指定する

CSS で引用符を指定する場合は、quotes プロパティを使用します。

content プロパティの値として「open-quote」、または「close-quote」を指定した場合に 追加される引用符を指定します。

但し、q 要素に対して quotes プロパティを指定する場合は、 contents プロパティの「open-quote」、または「close-quote」の指定は必要ありません。 (下のサンプルコード参照)

quotes プロパティの使用例


quotes: "「" "」";            /* 「」で囲む */
quotes: "「" "」" "『" "』";  /* 入れ子にする場合 */

前と後ろに表示する引用符を半角スペースで区切って指定します。 さらに半角スペースで区切ることで入れ子に対応した引用符を指定できます。

入れ子のレベルが引用符の組み合わせよりも多い場合は、最後に指定した引用符の組み合わせが 繰り返し使用されます。

引用符指定のサンプルコード

quotes プロパティを使って引用符を指定してみます。 1行目は「」で囲み、2行目は入れ子にして「」の中に『』を入れています。


<p>サンプルテキストです。<q>この部分を引用符で囲みます</q>サンプルテキストです。</p>

<p>サンプルテキストです。<q>引用符を<q>入れ子</q>にしてみます。</q>サンプルテキストです。</p>

<style>
    q {
        quotes: "「" "」" "『" "』";
    } 
</style>

表示結果

サンプルテキストです。この部分を引用符で囲みますサンプルテキストです。

サンプルテキストです。引用符を入れ子にしてみます。サンプルテキストです。

HTML・CSS入門