【CSS Modules】@namespaceアットルールの使い方

Copy
1/*
2 * @namespaceルールは、XMLネームスペースを持つ要素（例: SVG, MathML）に
3 * CSSスタイルを適用する際に使用します。HTML要素には通常必要ありません。
4 *
5 * ここでは、SVGのURI「http://www.w3.org/2000/svg」に
6 * 「svg」という接頭辞（プレフィックス）を割り当てています。
7 * これにより、同じ名前の要素が異なるネームスペースに存在する場合でも、
8 * 意図した要素のみを正確に選択できるようになります。
9 *
10 * (このCSSを適用するには、HTMLファイル内にSVG要素を埋め込む必要があります。)
11 */
12@namespace svg "http://www.w3.org/2000/svg";
13
14/*
15 * SVGネームスペースに属する<rect>要素にスタイルを適用します。
16 * 「svg|rect」のように、接頭辞と要素名を「| (縦棒)」で区切ることで、
17 * 特定のネームスペース内の要素のみをターゲットにできます。
18 * この「|」がネームスペースと要素名を区切る「separator」です。
19 */
20svg|rect {
21  fill: blue; /* 塗りつぶしの色を青に設定 */
22  stroke: black; /* 線の色を黒に設定 */
23  stroke-width: 2px; /* 線の太さを2ピクセルに設定 */
24}

CSSの@namespaceルールは、XMLネームスペースを持つ要素、例えばSVGやMathMLといったXMLベースのコンテンツにスタイルを適用する際に使用します。通常のHTML要素には基本的に必要ありません。このルール自体には特定の引数や戻り値はありません。

サンプルコードでは、まず@namespace svg "http://www.w3.org/2000/svg";と記述することで、SVGのXMLネームスペースURIである「http://www.w3.org/2000/svg」に「svg」という接頭辞（プレフィックス）を割り当てています。これにより、この接頭辞を使って特定のネームスペースに属する要素をCSSで指定できるようになります。

次に、svg|rect { ... }のようにセレクタを記述しています。ここで「svg」は先ほど定義したネームスペースの接頭辞、「rect」はSVGの要素名です。接頭辞と要素名の間にある「| (縦棒)」は、ネームスペースと要素名を区切るための「セパレータ」として機能します。この記述方法により、もしHTML内に同名の<rect>要素があったとしても、SVGネームスペースに属する<rect>要素のみにスタイルを適用し、他の要素と区別することができます。これにより、複数の異なるXML技術が混在する文書でも、意図した要素に正確にスタイルを適用できるようになります。

Copy
1/*
2 * CSS @namespaceルール サンプルコード
3 * XML名前空間を持つ要素へのスタイル適用に使用します。
4 * 主にHTML文書内にSVGやMathMLなどのXML要素を埋め込む場合に役立ちます。
5 *
6 * このコードは、HTML内に埋め込まれたSVG要素にスタイルを適用することを想定しています。
7 * 例: <svg><rect/><circle/></svg> のような構造。
8 */
9
10/*
11 * 1. プレフィックス付き名前空間の定義
12 *    SVG名前空間 (http://www.w3.org/2000/svg) に 'svg' というプレフィックスを割り当てます。
13 *    これにより、後のセレクタで 'svg|' を使ってSVG要素を指定できるようになります。
14 */
15@namespace svg url(http://www.w3.org/2000/svg);
16
17/*
18 * 2. 名前空間セレクタの使用例
19 *    定義したプレフィックス 'svg' を使って、SVG名前空間内の特定の要素を選択し、スタイルを適用します。
20 */
21
22/* SVG名前空間内の <rect> 要素にスタイルを適用 */
23svg|rect {
24  fill: #ff0000; /* 赤色で塗りつぶし */
25  stroke: #000000; /* 黒色の枠線 */
26  stroke-width: 2px;
27}
28
29/* SVG名前空間内の <circle> 要素にスタイルを適用 */
30svg|circle {
31  fill: #00ff00; /* 緑色で塗りつぶし */
32  stroke: #000000;
33  stroke-width: 2px;
34}
35
36/*
37 * 3. ユニバーサル名前空間セレクタの例
38 *    'svg' 名前空間内のすべての要素にスタイルを適用します。
39 */
40svg|* {
41  opacity: 0.8; /* 全体の透明度を設定 */
42}
43
44/*
45 * 4. 名前空間を持たないHTML要素への適用例
46 *    プレフィックスなしのセレクタは、デフォルトで名前空間を持たない要素 (HTML要素など) にマッチします。
47 *    (例: <p>タグなどのHTML要素)
48 */
49p {
50  color: #333333;
51  font-family: sans-serif;
52}

CSSの@namespaceルールは、XML名前空間を持つ要素へのスタイル適用に用います。引数や戻り値は持ちません。HTML文書内にSVGやMathMLなどのXML要素を埋め込む際に特に有効な機能です。

サンプルコードでは、@namespace svg url(http://www.w3.org/2000/svg);と記述し、SVGの名前空間に「svg」というプレフィックスを割り当てています。この定義により、CSSセレクタでsvg|要素名の形式を使うことで、SVG名前空間に属する特定の要素を選択し、スタイルを適用可能になります。

例えば、svg|rectはSVG名前空間内の<rect>要素に、svg|circleは<circle>要素にスタイルを適用します。svg|*のように記述すれば、SVG名前空間内のすべての要素にスタイルを適用できます。

一方、pのようにプレフィックスなしのセレクタは、デフォルトの名前空間を持たない通常のHTML要素にスタイルを適用します。@namespaceルールは、複数の名前空間が混在する文書において、目的の要素へ正確にスタイルを適用するために役立ちます。