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>
表示結果
サンプルテキストです。この部分を引用符で囲みます
サンプルテキストです。
サンプルテキストです。引用符を
サンプルテキストです。入れ子
にしてみます。