CSS3: quotes プロパティ - 引用符の設定

■ 概要

項　　目説　　明
記述形式 セレクタ {quotes: 値 }
値 の形式 none | 開始引用符 終了引用符　[ 開始引用符 終了引用符　[ 開始引用符 終了引用符] ]
初 期 値 テキスト
対応ブラウザー C2+ / e8+ / N?+ / Fx1.5+ / Op4.1+ / Ch1.1+ / Sa?+
適用可能な要素 すべての要素，::before，::after，::alternate，::marker，::line-marker，margin areas，@footnote の領域
継　　承 しない

■ 解説

quotesプロパティは，contentプロパティで挿入する 引用符の設定 をします。　引用の先頭につける 開始引用符 と、引用の末尾につける 終了引用符 の二つのペアを、スペースで区切って指定します。　また、複数ペアの開始引用符と終了引用符を指定することで、入れ子になった多階層の引用符を設定できます。　quotesプロパティで設定した開始引用符と終了引用符は、それぞれ、contentプロパティ の open-quote と close-quote として引用されます。

指定できる値の形式は，以下のとおりです。

値説　　明
none contentプロパティで引用符の挿入を指定した場合でも、引用符を表示しません。
開始引用符
(open-quote)		 開始引用符の前後を(")でくくって指定します。
終了引用符
(close-quote)		 終了引用符の前後を(")でくくって指定します。

■ 使用例（  quotes プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   q {quotes: "「" "」" "『" "』"; }
   q::before {content: open-quote; }
   q::after {content: close-quote; }
-->
</style>
HTML
<body> ～ </body>		 
<q>私は決して<q>行くな！</q>とは言わなかった。</q>
と彼は答えた。

ブラウザー 表示例
私は決して行くな！とは言わなかった。 と彼は答えた。

■ 備考

【参考ページ】