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>
表示

少年よ大志を抱けって誰の言葉だっけ?と彼が聞いてきた。