CSS - quotes

トップ > 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日
http://www.tohoho-web.com/css/prop/quotes.htm