quotes property
quotes プロパティは <q> 要素やCSS の content: open-quote / close-quote で使用される引用符を指定する。ネスト時の引用符も定義でき、日本語の「」『』やフランス語の << >> など、言語に適した引用符を設定できる。auto を指定すると lang 属性に基づいて自動選択される。
概要
quotes プロパティは <q> 要素やCSS の content: open-quote / close-quote で使用される引用符を指定する。ネスト時の引用符も定義でき、日本語の「」『』やフランス語の << >> など、言語に適した引用符を設定できる。auto を指定すると lang 属性に基づいて自動選択される。
対応ブラウザ
デスクトップ
Chrome 87+
Edge 87+
Safari 14.1+
Firefox 70+
モバイル
Chrome Android 87+
Safari iOS 14.5+
Firefox Android 79+
基本構文
CSS
/* 日本語の引用符 */
:lang(ja) {
quotes: "「" "」" "『" "』";
}
/* 自動選択 */
q {
quotes: auto;
}
/* カスタム引用符 */
.fancy-quote {
quotes: "\201C" "\201D" "\2018" "\2019";
}実務での使いどころ
-
多言語対応の引用
言語ごとに適切な引用符を設定し、各文化の慣習に合った表示を行う。
注意点
- quotes: auto は比較的新しいブラウザでのみサポートされる。明示的な指定の方が確実。
アクセシビリティ
- 引用符は <q> や <blockquote> 要素と組み合わせて使用し、意味的にも引用であることを示すこと。