quotes property
CSS の quotes プロパティは、HTML の <q> 要素に自動的に追加される引用符、または CSS の content プロパティの open-quotes または close-quotes 値を使用して追加される引用符（no-open-quote および no-close-quote を使用して省略される場合もあります）を、ブラウザーがどのようにレンダリングするかを設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 11 | 12 | 1.5 | 9 | 18 | 9 | |
auto | 87 | 87 | 70 | 14.1 | 87 | 14.5 |
none | 11 | 12 | 1.5 | 9 | 18 | 9 |
基本構文
CSS
/* Japanese quotation marks */
:lang(ja) {
quotes: "「" "」" "『" "』";
}
/* Auto-select */
q {
quotes: auto;
}
/* Custom quotes */
.fancy-quote {
quotes: "\201C" "\201D" "\2018" "\2019";
}ライブデモ
実務での使いどころ
-
多言語対応の引用
言語ごとに適切な引用符を設定し、各文化の慣習に合った表示を行う。
注意点
- quotes: auto は比較的新しいブラウザでのみサポートされる。明示的な指定の方が確実。
アクセシビリティ
- 引用符は <q> や <blockquote> 要素と組み合わせて使用し、意味的にも引用であることを示すこと。