From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_lang/index.html | 104 ++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 files/ja/web/css/_colon_lang/index.html (limited to 'files/ja/web/css/_colon_lang') diff --git a/files/ja/web/css/_colon_lang/index.html b/files/ja/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..85c6321ad1 --- /dev/null +++ b/files/ja/web/css/_colon_lang/index.html @@ -0,0 +1,104 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

CSS の :lang() 疑似クラス は、要素を定義された言語に基づいて選択します。

+ +
/* 英語 (en) の <p> をすべて選択 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

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

+
+ +

構文

+ +

形式文法

+ +
{{csssyntax}}
+ +

引数

+ +
+
<language-code>
+
対象としたい言語を表す {{cssxref("<string>")}} です。利用可能な値は HTML の仕様書で定義されています。
+
+ +

例

+ +

この例では、 子結合子 を使用して引用要素 ({{htmlElement("q")}}) の親を選択するために :lang() 疑似クラスを使用しています。なお、この例はこの目的のための唯一の方法でも、文書型における最適な方法を示しているわけでもありません。また、 {{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('Example', 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")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf