blob: 7f0325cce6f38588e07fbd6ecdb8df373b034833 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
---
title: '@namespace'
slug: Web/CSS/@namespace
tags:
- '@-規則'
- CSS
- CSS 名前空間
- Layout
- Reference
- Web
- ウェブ
- レイアウト
translation_of: Web/CSS/@namespace
---
<div>{{CSSRef}}</div>
<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>
<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 {}
/* これはすべての SVG <a> 要素を選択します。 */
svg|a {}
/* 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>
<p><code>@namespace</code> は、スタイルシートの<strong>既定の名前空間</strong>を定義できます。既定の名前空間を定義するとすべての全称セレクターや要素型セレクター (属性セレクターは除く。後述の注記を参照) は、既定の名前空間内の要素にのみ適用されます。</p>
<p>また、 <code>@namespace</code> 規則で<strong>名前空間の接頭辞</strong>を定義できます。全称セレクター、要素型セレクター、属性セレクターに名前空間の接頭辞を付加すると、これらのセレクターは名前空間<em>および</em>要素または属性に一致する場合のみ一致します。</p>
<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>
<div class="note">
<p><strong>メモ:</strong> XML では、属性に直接接頭辞を定義しない限り (<em>例</em>: <code>xlink:href</code>)、属性は名前空間を持ちません。言い換えると、属性は所属する要素から名前空間を継承しません。この動作に合わせるため、 CSS の既定の名前空間は属性セレクターに適用しません。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<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>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.at-rules.namespace")}}</p>
|
