CSS Reference

quotes

contentプロパティで挿入する引用符を指定する

quotes プロパティは、content プロパティで使用する open-quote および close-quote によって追加された引用符をどのように表示するかを設定します。このプロパティは、視覚的なメディアだけでなく、音声などの非視覚的なメディアにも対応します。

指定できる値は下記の通りです。

none content プロパティで open-quote や close-quote が指定されていても、引用符は表示されません。
auto 親要素のコンテンツの言語に基づいて、自動的に適切な引用符のスタイルがユーザエージェントによって選択されます。親要素が存在しない場合は、要素自身の言語に基づきます。（既定値）
match-parent 親要素に設定された引用符のシステム（quotes プロパティの値）に基づいて、自動的に適切な引用符のスタイルがユーザエージェントによって選択されます。
例えば、もし親要素の quotes の値が auto だった場合、親要素の言語に基づいて引用符のスタイルが決定されます。このため、要素に quotes: match-parent; を指定すると、引用符のスタイルを決定する際、要素自身の言語は考慮されないことになります。
[ <string> <string> ]+ 2つの <string> 値を空白で区切って指定したものを1組として、それを1組以上指定することで、引用符を設定します。
例えば、quotes: """ """ という指定の最初の値は content プロパティの open-quote に対応し、2つ目の値は close-quote に対応します。
quotes: """ """ "'" "'" のように複数の組を指定した場合、2つ目以降の組は、引用符を表示する要素が入れ子になった場合の、下位レベルの要素に対して引用符を指定したことになります。

quotesの仕様

初期値
  • auto
対象となる要素
  • すべての要素
継承
  • あり

quotesのサンプルソース

q::before { content: open-quote; }
q::after  { content: close-quote; }

q:lang(ja) {
  quotes: "『" "』" "「" "」";
}

q:lang(en) {
  quotes: "“" "”" "‘" "’";
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome