2021/08/13 時点の英語版に同期

1 files changed, 87 insertions, 97 deletions

diff --git a/files/ja/web/css/quotes/index.md b/files/ja/web/css/quotes/index.md
index 4138ffcf98..978f6f974f 100644
--- a/files/ja/web/css/quotes/index.md
+++ b/files/ja/web/css/quotes/index.md
@@ -5,59 +5,67 @@ tags:
   - CSS
   - CSS プロパティ
   - CSS 生成コンテンツ
-  - Reference
+  - リファレンス
   - ウェブ
   - レイアウト
   - 生成コンテンツ
 translation_of: Web/CSS/quotes
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>quotes</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、引用符がどのように表示されるかを設定します。</p>
+**`quotes`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 [`content`](/ja/docs/Web/CSS/content) プロパティの `open-quotes` や `close-quotes` を使用して追加された引用符をどのように表示するかを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div>
+{{EmbedInteractiveExample("pages/css/quotes.html")}}
 
-<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">/* キーワード値 */
+```css
+/* キーワード値 */
 quotes: none;
 quotes: auto;
 
-/* &lt;string&gt; 値 */
-quotes: "«" "»";           /* <em>open-quote</em> および <em>close-quote</em> をフランス語の引用符に設定 */
-quotes: "«" "»" "‹" "›";   /* ２レベルの引用符を設定 */
+/* <string> 値 */
+quotes: "«" "»";           /* open-quote および close-quote をフランス語の引用符に設定 */
+quotes: "«" "»" "‹" "›";   /* 2 レベルの引用符を設定 */
 
 /* グローバル値 */
 quotes: inherit;
 quotes: initial;
+quotes: revert;
 quotes: unset;
-</pre>
+```
+
+### 値
+
+- `none`
+  - : {{cssxref("content")}} プロパティの `open-quote` および `close-quote` の値で引用符を生成しません。
+- `auto`
+  - : 選択された要素に設定された言語の値（すなわち、 {{htmlattrxref("lang")}} 属性）で使用される適切な引用符が使用されます。
+- `[<string> <string>]+`
+  - : `open-quote` および `close-quote` を表す {{cssxref("&lt;string&gt;")}} の 1 つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表します。以下、順次下位レベルの引用符に対応します。
 
-<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>[&lt;string&gt; &lt;string&gt;]+</code></dt>
- <dd><code>open-quote</code> および <code>close-quote</code> を表す {{cssxref("&lt;string&gt;")}} の１つ以上の組。最初の組は、引用符を表示する要素が入れ子になった際の、最上層のものの引用符を表す。以下、順次下位レベルの引用符に対応する。</dd>
-</dl>
+{{cssinfo}}
 
-<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">&lt;q&gt;To be or not to be. That's the question!&lt;/q&gt;
-</pre>
+#### HTML
 
-<pre class="brush: css">q {
+```html
+<q>To be or not to be. That's the question!</q>
+```
+
+#### CSS
+
+```css
+q {
   quotes: '"' '"' "'" "'";
 }
 q::before {
@@ -65,75 +73,57 @@ q::before {
 }
 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">&lt;div lang="fr"&gt;
-  &lt;q&gt;<span class="tlid-translation translation" lang="fr"><span title="">Ceci est une citation française.</span></span>&lt;/q&gt;
-&lt;div&gt;
-&lt;hr&gt;
-&lt;div lang="ru"&gt;
-  &lt;q&gt;<span class="tlid-translation translation" lang="ru"><span title="">Это русская цитата</span></span>&lt;/q&gt;
-&lt;div&gt;
-&lt;hr&gt;
-&lt;div lang="ja"&gt;
-  &lt;q&gt;<span class="tlid-translation translation" lang="ja"><span title="">これは日本語の引用符です。</span></span>&lt;/q&gt;
-&lt;div&gt;
-&lt;hr&gt;
-&lt;div lang="en"&gt;
-  &lt;q&gt;This is an English quote.&lt;/q&gt;
-&lt;div&gt;
-</pre>
-
-<pre class="brush: css">/*q {
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}
+
+### 自動引用符
+
+多くのブラウザーでは、 `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>
+```
+
+#### CSS
+
+```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>
+```
+
+#### 結果
+
+{{EmbedLiveSample('Auto_quotes', "100%", 200)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ Cssxref("content") }}