トップページの中の プロパティの中の Qのプロパティ一覧の中の quotes

quotes

  • 最終更新:2010年1月16日 18:26

quotesプロパティは、contentプロパティで挿入する引用符を指定します。また、入れ子になった引用に対しても別の引用符を指定できます。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4未対応
  • Chrome3未対応

プロパティの解説

[<文字列> <文字列>]+|none|inherit
初期値
UA(ブラウザとか)に依存
適用される要素
全ての要素
継承
します
パーセント値
N/A
メディア
visual

値の解説

[<文字列> <文字列>]+
引用符の開始部と終了部を任意の文字列で指定します。この際、contentプロパティの値がopen-quoteclose-quoteである必要があります。また、空白類文字で区切って複数指定する事で入れ子の深さに合わせて引用符を変更する事ができます。
none
引用符を生成しません。これは、contentプロパティの値がopen-quoteclose-quoteの場合でも生成しません。

quotesのサンプル

<p>
<q>text<q>text<q>text</q>text</q>text</q>
</p>
p {
  margin: 20px;
}

p q:after,
p q:before {
  color: #900;
  font-weight: bold;
}

p q:before {
  content: open-quote;
}

p q:after {
  content: close-quote;
}

p q {
  quotes: "「" "」" "『" "』" "\"" "\"";
}

引用符が目立つように赤系で太字にしてます。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

比較的短い文書の引用で、入れ子になった引用さらに入れ子など入れ子にする事も可能みたいですが、これを使う事って有るのだろうか・・・

IE6, 7、Chrome4、Safari4まで対応していないので、何とも使い道が少ないような。

このページの上部へ