quotes:置換要素を使って挿入する引用符の種類を設定する
初期値 | ブラウザの実装に依存する |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
quotesプロパティの説明
quotes
は、置換要素を使って挿入する引用符の種類を設定します。この機能は、content
プロパティの値にopen-quote
およびclose-quote
が指定されている場合に有効となります。
quotesに指定できる値
- none
- 引用符を生成しません。
content
プロパティの値にopen-quote
およびclose-quote
が指定されていても、空になります。 - auto
- 要素に設定されている言語にふさわしい引用符を採用します。
- [<string> <string>]+
- 開始の引用符と終了の引用符の組を表すリストです。アポストロフィー(
''
)またはダブルクォーテーション(""
)で囲う記法で、open-quote
およびclose-quote
で挿入される記号を定義します。複数の組を指定した場合は、引用符が入れ子になった時の下位階層の記号となります。
quotesの使い方とサンプル
quotes
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
quotes: none;
quotes: auto;
/* <string>値 */
quotes: '[text]' '[text]'; /* 任意の記号の組を設定 */
quotes: "[text]" "[text]"; /* 任意の記号の組を設定 */
quotes: "「" "」" "『" "』"; /* 下位階層の記号を設定 */
/* グローバル値 */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: unset;
quotesの実例
それでは実際にquotes
プロパティの書き方を見ていきましょう。quotes
の内容を挿入する箇所は、疑似要素の::before
と::after
で指定します。例えば、引用を表す<q>
タグを用いてその範囲を表します。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > div {
overflow: auto;
margin-top: 1rem;
padding: 0 1rem 1rem;
background-color: #fff;
}
div > p {
margin: 1rem 0 0;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
.quo_1 > q {
quotes: '“' '”';
}
.quo_2 > q {
quotes: '〝' '〟';
}
.quo_3 > q {
quotes: "「" "」";
}
.quo_4 > q {
quotes: "『" "』";
}
.quo_5 > q {
quotes: "「" "」" "『" "』";
}
HTML
<section class="samp_box">
<div>
<p class="quo_1">任意の<q>引用符を指定</q>します</p>
<p class="quo_2">任意の<q>引用符を指定</q>します</p>
<p class="quo_3">任意の<q>引用符を指定</q>します</p>
<p class="quo_4">任意の<q>引用符を指定</q>します</p>
<p class="quo_5"><q>引用符を<q>階層化した場合</q>の確認</q>です</p>
</div>
</section>
quotesに関連するCSSプロパティ
内容の挿入・置換 | |
---|---|
content | 特定の要素に対してコンテンツの挿入や置換を行う |
counter-increment | CSSカウンターの値を増加または減少させる |
counter-reset | CSSカウンターの値をリセットする |
quotes | 置換要素を使って挿入する引用符の種類を設定する |