引用符を設定する

content は内容の追加を、quotes は引用符の種類を設定するプロパティです。

• content … 要素の前後に内容を追加
• quotes … 引用符の種類を設定

この2つのプロパティを組み合わせて使用すると、要素の前後に引用符を挿入することができます。

引用符の入れ子

引用の入れ子の深さに応じて、引用符のペアを複数設定することもできます。（引用符のペアを半角スペースで区切って記述していきます）

quotes: "「" "」" "『" "』";

例えば上記のように設定されている場合は、入れ子の引用符が次のように表示されることが期待されます。

例） 鈴木さんは、「山田君は『CSSを勉強中です』と言っていたよ」と書いてしました。

引用符のエスケープ

二重引用符（ " ）の中で二重引用符を指定する場合は、次のようにバックスラッシュ（ \ ）でエスケープしておきます。

quotes: "\"" "\"" "'" "'";

または、次のように一重引用符（ ' ）で囲むようにします。

quotes: '"' '"' "'" "'";

指定例

例えば、q要素で使用する引用符を 「」 と 『』 に設定する場合は、次のような指定内容になります。

q {
quotes: "「" "」" "『" "』";
}

このプロパティは、疑似要素の :before または :after と組み合わせて使用します。

• :before … 要素の直前に対する指定
• :after … 要素の直後に対する指定

:before と :after に関する詳細は、疑似要素の指定をご覧ください。

要素の前後に引用符を挿入する

次のように、:before に対して開始引用符を、:after に対して終了引用符を設定します。

q:before {
content: open-quote;
}
q:after {
content: close-quote;
}

上記の例では、quotesプロパティで設定した引用符が、q要素の前後に挿入されることになります。（引用の入れ子の深さに応じた引用符が使用されます）

引用符の入れ子の深さをだけを変更する

no-open-quote と no-close-quote は、quotesプロパティで設定されている引用符の入れ子の深さだけを変更します。（引用符は挿入されません）

• no-open-quote … 開始引用符を挿入したことにして、引用符の入れ子の深さを一段階深くする
• no-close-quote … 終了引用符を挿入したことにして、引用符の入れ子の深さを一段階浅くする

この値は、例えば複数の段落からなる文章を引用する場合に、次のような感じで使用することができます。

blockquote p:before {
content: open-quote;
}
blockquote p:after {
content: no-close-quote;
}
blockquote p.last:after {
content: close-quote;
}

上記のように設定しておくと、開始引用符は全ての段落に、終了引用符は最後の段落にのみ挿入されるようになります。