【quotes】引用符として使用する記号を指定

quotesプロパティでは、contentプロパティで追加する引用符を指定することができます。

quotesプロパティで引用符として使用したい記号を設定し、疑似要素の「:before」「:after」で要素の前後に指定した引用符を追加します。 この時「:before」「:after」に対してcontentプロパティの「open-quote」、または「close-quote」を指定して下さい。

:before{content: open-quote}」で要素の先頭、「:after{content: close-quote;}」で要素の最後にquotesプロパティで設定した引用符が挿入されます。 またデフォルトの「"」などの引用符は、quotesで指定した記号に置き換えられます。

※初期値の引用符はブラウザによって異なります。

なお引用符として使用したい記号を複数指定することで、引用の入れ子の深さに応じた引用符を設定する事もできます。

書式

  • 要素 { quotes : } ……… 引用符を設定する
  • 要素:before { content : open-quote } ……… 要素の先頭に引用符を追加
  • 要素:after { content : close-quote }……… 要素の最後に引用符を追加

★:"記号1" "記号2"、none、inherit

"記号1" "記号2"
"記号1" "記号2"のように、先頭に表示する引用符と最後に表示する引用符(記号)を半角スペースで区切って1組で指定します。さらにスペースで区切って指定すれば、入れ子の深さに応じた引用符のペアを指定することもできます。
なおここで指定した引用符のペアの数よりも、入れ子の深さが深くなった場合は、最後に指定した引用符が繰り返し使用されます。
none
contentプロパティでopen-quote、close-quoteが指定されても、引用符を表示しません。

使用した時の例

q {quotes: "「" "」" "『" "』";}
q:before {content: open-quote;}
q:after {content: close-quote;}

q:before,q:after {color: red;}
著書でシュガーマンは<q>流行とは、単純に言えば<q>熱狂</q>のことだ</q>といっている

ブラウザ上の表示例

著書でシュガーマンは流行とは、単純に言えば熱狂のことだといっている

対応ブラウザなどのデータ

初期値 ブラウザによる 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / content
対応ブラウザ Internet Explorer8~ , Google Chrome11~ , Firefox1.5~ , Opera11~ , Safari5~

関連情報