From a42ee55dffd89f6a8b4cd6dcb47273c8932df0fb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 16:07:30 +0900 Subject: 2021/10/24 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_lang/index.md | 150 ++++++++++++++-------------------- 1 file 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 --- -
{{CSSRef}}
+{{CSSRef}} -

:lang() はCSS の擬似クラスで、指定された言語に基づいて要素に一致させます。

+**`:lang()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、指定された言語に基づいて要素に一致します。 -
/* <p> のうち English (en) のものをすべて選択 */
+```css
+/* 
 のうち English (en) のものをすべて選択 */
 p:lang(en) {
   quotes: '\201C' '\201D' '\2018' '\2019';
-}
+} +``` -
-

メモ: HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。

-
+> **Note:** HTML では、言語は {{htmlattrxref("lang")}} 属性と {{HTMLElement("meta")}} 要素、それに、可能であればプロトコルから得られる情報 (HTTP ヘッダーなど) の組み合わせで決められます。他の文書型では、文書の言語を決定する他の方法があるかもしれません。 -

構文

+## 構文 -

形式文法

+### 形式文法 {{csssyntax}} -

引数

- -
-
<language-code>
-
{{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は HTML 仕様書で定義されています。
-
- -

例

- -

この例では、 :lang() 疑似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために 子結合子 を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。

- -

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="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
-
- -

CSS

- -
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) > q { quotes: '« ' ' »'; }
-:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
-
- -

結果

- -

{{EmbedLiveSample('Examples', 350)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}ワイルドカードによるマッチングとカンマ区切りの言語リストを追加。
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}有意な変更なし。
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}初回定義。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.lang")}}

-
- -

関連情報

- - +### 引数 + +- `` + - : {{cssxref("<string>")}} で、ターゲットにしたい言語を表します。受付可能な値は [HTML](/ja/docs/Web/HTML) 仕様書で定義されています。 + +## 例 + +この例では、 `:lang()` 擬似クラスを使用して引用要素 ({{htmlElement("q")}}) の親を選択するために [子結合子](/ja/docs/Web/CSS/Child_combinator) を使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{glossary("Unicode")}} の値は特殊な引用符を指定するために使用していることに注意してください。 + +### HTML + +```html +
This English quote has a nested quote inside.
+
This French quote has a nested quote inside.
+
この日本語の引用には内部に入れ子の引用があります。
+``` + +### 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)")}} -- cgit v1.2.3-54-g00ecf