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 | [ <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 の定義
勧告 初回定義
初期値ユーザエージェントに依存
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
quotesChrome 完全対応 11Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 8Opera 完全対応 4Safari 完全対応 9WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 9Samsung Internet Android ?
auto keywordChrome 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Edge 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox 完全対応 70IE 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Opera 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
WebView Android 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox Android 未対応 なしOpera Android 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari iOS 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Samsung Internet Android 未対応 なし
補足
未対応 なし
補足
補足 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報