--- 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: "«" "»" "‹" "›"; /* 2レベルの引用符を設定 */ /* グローバル値 */ 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>")}} の1つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。</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>{{Compat("css.properties.quotes")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li>{{ Cssxref("content") }} プロパティ</li> </ul>