quotesプロパティは contentプロパティ:before { content: open-quote; }, :after { content: close-quote; } を設定している場合に、任意の要素の内容にレンダリング(描画)する開始の引用符と終了の引用符を指定します。開始と終了をセットで指定し、複数指定することも可能です。

初期値
UA の設定に依存
適用対象
すべての要素
継承
する
メディア
visual

引用符の追加における contentプロパティの値と quotesプロパティの関係は以下のようになっています。

:before { content : open-quote ; }
要素の先頭にquotesプロパティで設定された開始引用符を追加
追加される引用符は入れ子の深さに応じた引用符が使用される
:after { content : close-quote ; }
要素の最後にquotesプロパティで設定された終了引用符を追加
追加される引用符は入れ子の深さに応じた引用符が使用される
:before { content : no-open-quote ; }
quotesプロパティで設定された要素の階層(引用レベル)を一段階深くする
引用符は追加されない
:after { content : no-close-quote ; }
quotesプロパティで設定された要素の階層(引用レベル)を一段階浅くする
引用符は追加されない

要素の階層にあたる引用レベルとは、引用の度合いを指します。たとえば、q:before { content: open-quote; } q:after { content: close-quote; } と指定された q要素が入れ子になっている場合、引用部分の中に、さらに引用が含められることになり、最初の q要素を引用レベル1とすれば、入れ子になっている q要素は引用レベル2となります。

引用レベルは、contentプロパティに "open-quote"、または "no-open-quote" が指定されている要素が登場する度にレベルが1上がり、これに対して "close-quote"、または "no-close-quote" が指定されている要素が登場する度にレベルが1下がることになります。なお、"no-open-quote" と "no-open-quote" は引用レベルを操作するものであり、それ自身では引用符を追加することはできません。

quotesプロパティの値

quotesプロパティに指定できる値はそれぞれ以下の意味を示します。

none
引用符を追加しない(引用符は表示されない)
<文字列> <文字列> ...
開始と終了の引用符をセットで指定。複数指定も可能で、引用レベルに応じた引用符を指定します。
文字列はダブルクォーテーション(")、もしくはシングルクォーテーション(')の引用符で括り、半角スペースで区切ります。

たとえば、"quotes : "“" "”" "‘" "’" ;" のように記述すれば、左から1つ目の「」が引用レベル1の開始、左から2つ目の「」が引用レベル1の終了、左から3つ目の「」が引用レベル2の開始、左から4つ目の「」が引用レベル2の終了に使用される引用符という解釈になります。

quotesプロパティの実装状況

IE
◯:IE8よりサポート、IE6, 7は未サポート
Firefox
Opera
Chrome
Safari
iOS
Android

quotesプロパティの初期値は、各UAの設定に依ります。主要ブラウザにおいてq要素にデフォルトで設定されているquotesプロパティの値はFirefoxでは左右対のダブルクォーテーション(“ ”)、IE8+, Chrome, Safari, Operaでは始め終わり対の鉤括弧(「 」)が指定されています。quotesプロパティを指定することでブラウザ間の差を統一することができます。

サンプル

q        { quotes : "“" "”" "‘" "’" ; color : #03f ; }
q:before { content: open-quote; color : red ; }
q:after  { content: close-quote; color : red ; }

このサンプルでは、引用レベル1に対しては、左右対のダブルクォーテーション(“ ”)を、引用の中に引用が含められている引用レベル2に対しては、左右対のシングルクォーテーション(‘ ’)を表示します。

Updated / Published