CSS - quotes
概要
| 属性名 | quotes |
|---|---|
| 値 | none | [ <start> <end> ]+ |
| 初期値 | ブラウザに依存 |
| 適用可能要素 | ::before, ::after など |
| 継承 | 継承しない |
| メディア | Visual / Content |
| サポート | C2 / e8 / Fx1.5 / Ch11 / Op41 |
説明
q要素の前後に挿入される引用符を指定します。ここで指定された開始引用符、終了引用符は、open-quote, close-quote で参照されます。
| 値 | 説明 |
|---|---|
| none | 引用符を表示しません。 |
| <start> | 開始引用符を指定します。 |
| <end> | 終了引用符を指定します。 |
下記の例では、<q>～</q> を 「～」で、二重に囲まれた <q>～</q> を 『～』で囲みます。
CSS
q { quotes: "「" "」" "『" "』"; }
q:before { content: open-quote; }
q:after { content: close-quote; }
Internet Explorer では <q>～</q> を 「～」で、二重に囲まれた <q>～</q> を 『～』で囲みます。Firefox, Chrome, Opera, Safari では <q>～</q> を “～” で、二重に囲まれた <q>～</q> を ‘～’ で囲みます。
使用例
CSS
q { quotes: "「" "」" "『" "』"; }
q:before { content: open-quote; }
q:after { content: close-quote; }
HTML
<p><q><q>少年よ大志を抱け</q>って誰の言葉だっけ？</q>と彼が聞いてきた。</p>
表示
と彼が聞いてきた。少年よ大志を抱け
って誰の言葉だっけ？
Copyright (C) 1997-2012 杜甫々
初版：1997年7月27日、最終更新：2012年5月4日
https://www.tohoho-web.com/css/prop/quotes.htm