blob: e627bbf8ba2bb82fed5c87b230e45393bbb871a5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: quotes
slug: Web/CSS/quotes
tags:
- CSS
- CSS プロパティ
- CSS 生成コンテンツ
- Reference
- ウェブ
- レイアウト
- 生成コンテンツ
translation_of: Web/CSS/quotes
---
<div>{{CSSRef}}</div>
<p><strong><code>quotes</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、引用符がどのように表示されるかを設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers">/* キーワード値 */
quotes: none;
quotes: auto;
/* <string> 値 */
quotes: "«" "»"; /* <em>open-quote</em> および <em>close-quote</em> をフランス語の引用符に設定 */
quotes: "«" "»" "‹" "›"; /* ２レベルの引用符を設定 */
/* グローバル値 */
quotes: inherit;
quotes: initial;
quotes: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>none</code></dt>
<dd>{{cssxref("content")}} プロパティの <code>open-quote</code> および <code>close-quote</code> の値が引用符を生成しません。</dd>
<dt><code>auto</code></dt>
<dd>選択された用途に設定された言語の値 (すなわち、 {{htmlattrxref("lang")}} 属性) で使用される適切な引用符が使用されます。</dd>
<dt><code>[<string> <string>]+</code></dt>
<dd><code>open-quote</code> および <code>close-quote</code> を表す {{cssxref("<string>")}} の１つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_quote_marks" name="Basic_quote_marks">基本的な引用符</h3>
<pre class="brush: html"><q>To be or not to be. That's the question!</q>
</pre>
<pre class="brush: css">q {
quotes: '"' '"' "'" "'";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}</pre>
<p>{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}</p>
<h3 id="Auto_quotes" name="Auto_quotes">自動引用符</h3>
<pre class="brush: html"><div lang="fr">
<q><span class="tlid-translation translation" lang="fr"><span title="">Ceci est une citation française.</span></span></q>
<div>
<hr>
<div lang="ru">
<q><span class="tlid-translation translation" lang="ru"><span title="">Это русская цитата</span></span></q>
<div>
<hr>
<div lang="ja">
<q><span class="tlid-translation translation" lang="ja"><span title="">これは日本語の引用符です。</span></span></q>
<div>
<hr>
<div lang="en">
<q>This is an English quote.</q>
<div>
</pre>
<pre class="brush: css">/*q {
quotes: auto;
}*/
</pre>
<p>{{EmbedLiveSample('Auto_quotes', "100%", 200)}}</p>
<h2 id="Notes" name="Notes">メモ</h2>
<ul>
<li>(Firefox 70 以降) では <code>quotes</code> の既定値はどのような場合も <code>auto</code> であり、その他のブラウザー (Chromium, Safari, Edge) もこの動作をしますので、多くのブラウザーでは明示的に設定しなくても上記の例が動作します。</li>
<li>Firefox 3.5 以降では、 quotes プロパティの初期値は <code>-moz-<a class="internal" href="/ja/docs/Web/CSS/initial">initial</a></code> を使用して読み出すことができます。これはそれより前のバージョンの Firefox では有効ではありません。</li>
</ul>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Content", "#quotes", "quotes")}}</td>
<td>{{Spec2("CSS3 Content")}}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.properties.quotes")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{ Cssxref("content") }} プロパティ</li>
</ul>
|
