2021/10/24 時点の英語版に同期

1 files changed, 61 insertions, 89 deletions

diff --git a/files/ja/web/css/_colon_lang/index.md b/files/ja/web/css/_colon_lang/index.md
index 2e0519a3f9..99fca47a4e 100644
--- a/files/ja/web/css/_colon_lang/index.md
+++ b/files/ja/web/css/_colon_lang/index.md
@@ -1,103 +1,75 @@
 ---
-title: ':lang'
-slug: 'Web/CSS/:lang'
+title: ':lang()'
+slug: Web/CSS/:lang
 tags:
   - CSS
-  - Layout
-  - Pseudo-class
-  - Reference
-  - Selector
-  - Web
-translation_of: 'Web/CSS/:lang'
+  - レイアウト
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+  - ウェブ
+browser-compat: css.selectors.lang
+translation_of: Web/CSS/:lang
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>:lang()</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、指定された言語に基づいて要素に一致させます。</p>
+**`:lang()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、指定された言語に基づいて要素に一致します。
 
-<pre class="brush: css no-line-numbers notranslate">/* &lt;p&gt; のうち English (en) のものをすべて選択 */
+```css
+/* <p> のうち English (en) のものをすべて選択 */
 p:lang(en) {
   quotes: '\201C' '\201D' '\2018' '\2019';
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>メモ:</strong> HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。</p>
-</div>
+> **Note:** HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+### 形式文法
 
 {{csssyntax}}
 
-<h3 id="Parameter" name="Parameter">引数</h3>
-
-<dl>
- <dt><code>&lt;language-code&gt;</code></dt>
- <dd>{{cssxref("&lt;string&gt;")}} で、ターゲットにしたい言語を表します。受付可能な値は <a href="/ja/docs/Web/HTML">HTML</a> 仕様書で定義されています。</dd>
-</dl>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>この例では、 <code>:lang()</code> 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために <a href="/ja/docs/Web/CSS/Child_selectors">子結合子</a> を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
-&lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
-&lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) &gt; q { quotes: '« ' ' »'; }
-:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Examples', 350)}}</p>
-
-<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('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>有意な変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.lang")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>原語に関する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
- <li>HTML の {{htmlattrxref("lang")}} 属性</li>
- <li>HTML の {{htmlattrxref("translate")}} 属性</li>
- <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages</a></li>
-</ul>
+### 引数
+
+- `<language-code>`
+  - : {{cssxref("&lt;string&gt;")}} で、ターゲットにしたい言語を表します。受付可能な値は [HTML](/ja/docs/Web/HTML) 仕様書で定義されています。
+
+## 例
+
+この例では、 `:lang()` 擬似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために [子結合子](/ja/docs/Web/CSS/Child_combinator) を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。
+
+### HTML
+
+```html
+<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="ja"><q>この日本語の引用には内部に<q>入れ子</q>の引用があります。</q></div>
+```
+
+### CSS
+
+```css
+:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(ja) > q { quotes: '「' '」' '『' '』'; }
+```
+
+### 結果
+
+{{EmbedLiveSample('Examples', 350)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 言語に関する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}
+- HTML の {{htmlattrxref("lang")}} 属性
+- HTML の {{htmlattrxref("translate")}} 属性
+- {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}