quotes
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
試してみましょう
構文
css
/* キーワード値 */
quotes: none;
quotes: auto;
/* <string> 値 */
quotes: "«" "»"; /* open-quote および close-quote をフランス語の引用符に設定 */
quotes: "«" "»" "‹" "›"; /* 2 レベルの引用符を設定 */
/* グローバル値 */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: unset;
値
公式定義
初期値 | ユーザエージェントに依存 |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
基本的な引用符
HTML
html
<q>To be or not to be. That's the question!</q>
CSS
css
q {
quotes: '"' '"' "'" "'";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
結果
自動引用符
多くのブラウザーでは、 quotes
の既定値は auto
(Firefox 70 以降)、またそれ以外のブラウザー (Chromium, Safari, Edge) ではこれが既定の動作なので、この例は明示的に設定されなくても動作します。
HTML
html
<div lang="ja">
<q>これが日本語の引用符です。</q>
<div>
<hr />
<div lang="ru">
<q>Это русская цитата</q>
<div>
<hr />
<div lang="de">
<q>Dies ist ein deutsches Zitat</q>
<div>
<hr />
<div lang="en">
<q>This is an English quote.</q>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
css
/*q {
quotes: auto;
}*/
結果
仕様書
Specification |
---|
CSS Generated Content Module Level 3 # quotes |
ブラウザーの互換性
BCD tables only load in the browser