quotes：置換要素を使って挿入する引用符の種類を設定する

quotesプロパティの説明

quotesは、置換要素を使って挿入する引用符の種類を設定します。この機能は、contentプロパティの値にopen-quoteおよびclose-quoteが指定されている場合に有効となります。

quotesに指定できる値

none

引用符を生成しません。contentプロパティの値にopen-quoteおよびclose-quoteが指定されていても、空になります。

auto

要素に設定されている言語にふさわしい引用符を採用します。

[<string> <string>]+

開始の引用符と終了の引用符の組を表すリストです。アポストロフィー（''）またはダブルクォーテーション（""）で囲う記法で、open-quoteおよびclose-quoteで挿入される記号を定義します。複数の組を指定した場合は、引用符が入れ子になった時の下位階層の記号となります。

quotesの使い方とサンプル

quotesプロパティの構文は以下の通りです。

/* キーワード値 */
quotes: none;
quotes: auto;

/* <string>値 */
quotes: '[text]' '[text]';   /* 任意の記号の組を設定 */
quotes: "[text]" "[text]";   /* 任意の記号の組を設定 */
quotes: "「" "」" "『" "』";  /* 下位階層の記号を設定 */

/* グローバル値 */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: unset;

quotesの実例

それでは実際にquotesプロパティの書き方を見ていきましょう。quotesの内容を挿入する箇所は、疑似要素の::beforeと::afterで指定します。例えば、引用を表す<q>タグを用いてその範囲を表します。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.samp_box > div {
	overflow: auto;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background-color: #fff;
}
div > p {
	margin: 1rem 0 0;
}
q::before {
	content: open-quote;
}
q::after {
	content: close-quote;
}
.quo_1 > q {
	quotes: '“' '”';
}
.quo_2 > q {
	quotes: '〝' '〟';
}
.quo_3 > q {
	quotes: "「" "」";
}
.quo_4 > q {
	quotes: "『" "』";
}
.quo_5 > q {
	quotes: "「" "」" "『" "』";
}

<section class="samp_box">
	<div>
		<p class="quo_1">任意の<q>引用符を指定</q>します</p>
		<p class="quo_2">任意の<q>引用符を指定</q>します</p>
		<p class="quo_3">任意の<q>引用符を指定</q>します</p>
		<p class="quo_4">任意の<q>引用符を指定</q>します</p>
		<p class="quo_5"><q>引用符を<q>階層化した場合</q>の確認</q>です</p>	
	</div>
</section>