quotesプロパティの説明
CSSの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>タグを用いてその範囲を表します。
<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>
.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: "「" "」" "『" "』";
}