CSS3 Pre-Reference



quotes

引用符

試す

コード

p {
  content: 'abc' 'def' "ghi" "jkl";
}
p::before {
  content: open-quote;
}
p::after {
  content: close-quote;
}

サンプル

最初に"abc"、青文字の間に"ghi"、赤文字の間に"jkl"、最後に"def"が挿入されていれば対応しています。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。青文字
青文字その後(けむり)したから火がある。ただその日がよかろう度毎まった。赤文字
赤文字

コメントする


対応ブラウザ

Firefox
1.5~
Chrome/Safari
まだ
Opera
4.0~
InternetExplorer
8.0~

パラメータ

[ <文字列> <文字列> ]+ | none
初期値 ブラウザ依存
適用 すべての要素、::before、::after、::alternate、::marker、::line-marker疑似要素、マージン領域、脚注領域
継承 しない
レベル 2-
%の解釈 -
適用メディア Visual
参考文献 CSS3 Generated and Replaced Content Module#7. Specifying quotes with the 'quotes' property

解説

要素を囲う引用符を指定するプロパティです。

このプロパティは、単体では意味を成しません。'content'で書き出す事によって、効果を発揮します。

値の記述のし方は、引用レベルが1の場合の開始引用符、終了引用符、引用レベルが2の場合の開始引用符、終了引用符、という順に記述していきます。例えば以下のようにします。
q { quotes: '"' '"' "'" "'" }
こうして、例えば'content'を以下のように指定すると・・・
q::before { content: open-quote }
q::after { content: close-quote }

q要素 の前には、'quotes'の1つ目の値を参照して「"」、後ろには'quotes'の2つ目の値を参照して「"」が付きます。

3つ目と4つ目は、q要素 の中に、更に q要素 が入れ子になっている場合に使用します。子供のq要素 の前には、'quotes'の3つ目の値を参照して「'」、後ろには'quotes'の4つ目の値を参照して「'」が付きます。5つ目、6つ目、と指定しておくと、更に入れ子になった場合に使用されます。このような具合です。
<p><q>引用した部分<q>引用の中の引用</q>引用した部分</q></p>
という文書があった場合、
"引用した部分'引用の中の引用'引用した部分"
以上のように表示されます。

引用の度合いの事を引用レベルと言います。

引用レベルは'content'に [open-quote] か [no-open-quote] が指定されている要素が1度登場する度に1上がり、'content'に [close-quote] か [no-close-quote] が指定されている要素が1度登場する度に1下がります。つまり、必ずしもSGMLの入れ子レベルと一致しません。':before' に [close-quote] なんて指定すると、引用レベルはマイナスになってしまうところですが、"0"以下にはしない事になっていますので、マイナスにはなりません。また、マイナスになってしまうような箇所では、引用符を表示ししません。

引用レベルが指定されているレベルを超えた場合は、最後の引用符の組を繰り返します。

先にも登場していますが、値にはもう2種類あって、[no-open-quote] [no-close-quote]と言います。この値を使用すると、引用レベルには影響を与えますが、引用符は付きません。

トラックバック

投稿されたコメント