quotes

quotesCSS のプロパティで、引用符がどのように表示されるかを設定します。

構文

/* キーワード値 */
quotes: none;
quotes: auto;

/* <string> 値 */
quotes: "«" "»";           /* open-quote および close-quote をフランス語の引用符に設定 */
quotes: "«" "»" "‹" "›";   /* 2レベルの引用符を設定 */

/* グローバル値 */
quotes: inherit;
quotes: initial;
quotes: unset;

none
content プロパティの open-quote および close-quote の値が引用符を生成しません。
auto
選択された用途に設定された言語の値 (すなわち、 lang 属性) で使用される適切な引用符が使用されます。
[<string> <string>]+
open-quote および close-quote を表す <string> の1つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。

形式文法

none | auto | [ <string> <string> ]+

基本的な引用符

<q>To be or not to be. That's the question!</q>
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

自動引用符

<div lang="fr">
  <q>Ceci est une citation française.</q>
<div>
<hr>
<div lang="ru">
  <q>Это русская цитата</q>
<div>
<hr>
<div lang="ja">
  <q>これは日本語の引用符です。</q>
<div>
<hr>
<div lang="en">
  <q>This is an English quote.</q>
<div>
/*q {
  quotes: auto;
}*/

メモ

  • (Firefox 70 以降) では quotes の既定値はどのような場合も auto であり、その他のブラウザー (Chromium, Safari, Edge) もこの動作をしますので、多くのブラウザーでは明示的に設定しなくても上記の例が動作します。
  • Firefox 3.5 以降では、 quotes プロパティの初期値は -moz-initial を使用して読み出すことができます。これはそれより前のバージョンの Firefox では有効ではありません。

仕様書

仕様書 状態 備考
CSS Generated Content Module Level 3
quotes の定義
草案
CSS Level 2 (Revision 1)
quotes の定義
勧告 初回定義

初期値ユーザエージェントに依存
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

BCD tables only load in the browser

関連情報