diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-20 18:15:53 +0900 |
---|---|---|
committer | potappo <potappo@gmail.com> | 2022-02-25 19:14:40 +0900 |
commit | 34e45a7a29bd23d5465ce34e287858788aa2f183 (patch) | |
tree | 4c912e5778194bbf5ba26bdf73225fe96bd6db0c /files/ja/web/css | |
parent | 9490160e7c6b321b3a3c410b9ed836ddfb7b1446 (diff) | |
download | translated-content-34e45a7a29bd23d5465ce34e287858788aa2f183.tar.gz translated-content-34e45a7a29bd23d5465ce34e287858788aa2f183.tar.bz2 translated-content-34e45a7a29bd23d5465ce34e287858788aa2f183.zip |
2022/02/18 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css')
-rw-r--r-- | files/ja/web/css/@namespace/index.md | 105 |
1 files changed, 52 insertions, 53 deletions
diff --git a/files/ja/web/css/@namespace/index.md b/files/ja/web/css/@namespace/index.md index 3ea4617676..61a3382c8f 100644 --- a/files/ja/web/css/@namespace/index.md +++ b/files/ja/web/css/@namespace/index.md @@ -2,77 +2,76 @@ title: '@namespace' slug: Web/CSS/@namespace tags: - - '@-規則' + - アットルール - CSS - CSS 名前空間 - - Layout - - Reference - - Web - - ウェブ - レイアウト + - リファレンス + - ウェブ +browser-compat: css.at-rules.namespace translation_of: Web/CSS/@namespace --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>@namespace</code></strong> は、<a href="/ja/docs/Glossary/CSS">CSS</a> <a href="/ja/docs/Web/API/StyleSheet">スタイルシート</a> で使用する <a href="/ja/docs/Namespaces">XML 名前空間</a>を定義する <a href="/ja/docs/Web/CSS/At-rule" title="CSS at-rules">@-規則</a>です。定義済みの名前空間は、<a href="/ja/docs/Web/CSS/Universal_selectors">全称</a>、<a href="/ja/docs/Web/CSS/Type_selectors">要素型</a>、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性</a>の各<a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクター</a>で、その名前空間内の要素だけを選択するために使用することができます。 <code>@namespace</code> 規則は通常、複数の名前空間を含む文書 (インラインで SVG や MathML を含む HTML5 文書や、複数のボキャブラリが混在する XML 文書など) を扱う際に役立ちます。</span></p> +**`@namespace`** は[アットルール](/ja/docs/Web/CSS/At-rule)で、 +[CSS](/ja/docs/Glossary/CSS) [スタイルシート](/ja/docs/Web/API/StyleSheet) で使用する [XML 名前空間](/ja/docs/Namespaces)を定義します。 -<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml); -@namespace svg url(http://www.w3.org/2000/svg); +## 構文 -/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します。 */ -a {} +```css +/* 既定の名前空間 */ +@namespace url(XML-namespace-URL); +@namespace "XML-namespace-URL"; -/* これはすべての SVG <a> 要素を選択します。 */ -svg|a {} +/* 接頭辞つきの名前空間 */ +@namespace prefix url(XML-namespace-URL); +@namespace prefix "XML-namespace-URL"; +``` -/* This matches both XHTML and SVG <a> elements */ -*|a {}</pre> +## 解説 -<p><code>@namespace</code> 規則は、スタイルシート内ですべての <a href="/ja/docs/Web/CSS/%40charset">@charset</a> および <a href="/ja/docs/Web/CSS/%40import">@import</a> 規則より後、また他の @-規則や<a href="/ja/docs/Web/API/CSSStyleDeclaration">スタイル宣言</a>より前に配置しなければなりません。</p> +定義された名前空間は、[全称](/ja/docs/Web/CSS/Universal_selectors)、[型](/ja/docs/Web/CSS/Type_selectors)、[属性](/ja/docs/Web/CSS/Attribute_selectors)[セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors)において、選択する要素をその名前空間に制限するために使用することができます。 `@namespace` ルールは一般に、複数の名前空間を含む文書を扱う場合—例えば、HTML5 でインラインの SVG や MathML を併用する場合や、複数の語彙が混在する XML などでのみ役立ちます。 -<p><code>@namespace</code> は、スタイルシートの<strong>既定の名前空間</strong>を定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター (属性セレクターは除く。後述の注記を参照) は、既定の名前空間内の要素にのみ適用されます。</p> +`@namespace` ルールは、スタイルシート内ですべての {{cssxref("@charset")}} および [@import]{{cssxref("@import")}} ルールより後、また他のアットルールや[スタイル宣言](/ja/docs/Web/API/CSSStyleDeclaration)より前に配置しなければなりません。 -<p>また、 <code>@namespace</code> 規則で<strong>名前空間の接頭辞</strong>を定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間<em>および</em>要素または属性に一致する場合のみ一致します。</p> +`@namespace` は、スタイルシートの**既定の名前空間**が定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター(属性セレクターは除く。後述のメモを参照)は、既定の名前空間内の要素にのみ適用されます。 -<p><a href="/ja/docs/Glossary/HTML5">HTML5</a> では、既知の<a href="https://html.spec.whatwg.org/#foreign-elements">外来要素</a>へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に <code>xmlns</code> 属性が存在しなくても XHTML 名前空間 (<code>http://www.w3.org/1999/xhtml</code>) に含まれているかのように動作します。また <a href="/ja/docs/Web/SVG/Element/svg"><svg></a> および <a href="/ja/docs/Web/MathML/Element/math"><math></a> 要素は、適切な名前空間 (<code>http://www.w3.org/2000/svg</code> および <code>http://www.w3.org/1998/Math/MathML</code>) が割り当てられます。</p> +また、 `@namespace` ルールで**名前空間の接頭辞**が定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間*および*要素または属性に一致する場合のみ一致します。 -<div class="note"> -<p><strong>メモ:</strong> XML では、属性に直接接頭辞を定義しない限り (<em>例</em>: <code>xlink:href</code>)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。</p> -</div> +[HTML5](/ja/docs/Glossary/HTML5) では、既知の[外来要素](https://html.spec.whatwg.org/#foreign-elements)へ自動的に名前空間が割り当てられます。すなわち、 HTML 要素は文書内に `xmlns` 属性が存在しなくても XHTML 名前空間 (`http://www.w3.org/1999/xhtml`) に含まれているかのように動作します。また [\<svg>](/ja/docs/Web/SVG/Element/svg) および [\<math>](/ja/docs/Web/MathML/Element/math) 要素は、適切な名前空間(`http://www.w3.org/2000/svg` および `http://www.w3.org/1998/Math/MathML`)が割り当てられます。 -<h2 id="Syntax" name="Syntax">構文</h2> +> **Note:** XML では、属性に直接接頭辞を定義しない限り(*例*: `xlink:href`)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。 -<pre class="brush: css">/* 既定の名前空間 */ -@namespace url(<em>XML-namespace-URL</em>); -@namespace "<em>XML-namespace-URL</em>"; +## 形式文法 -/* 接頭辞つき名前空間 */ -@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>); -@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre> +{{csssyntax}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 例 -{{csssyntax}} +### 既定かつ定義済みの名前空間の指定 + +```css +@namespace url(http://www.w3.org/1999/xhtml); +@namespace svg url(http://www.w3.org/2000/svg); + +/* XHTML は既定で接頭辞のない名前空間であるため、これは XHTML のすべての <a> 要素を選択します */ +a {} + +/* これはすべての SVG <a> 要素を選択します */ +svg|a {} + +/* XHTML と SVG の両方の <a> 要素に一致します */ +*|a {} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<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 Namespaces', '#declaration', '@namespace')}}</td> - <td>{{Spec2('CSS3 Namespaces')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.namespace")}}</p> +- [名前空間の集中講座](/ja/docs/Web/SVG/Namespaces_Crash_Course) |