CSS/@namespace

@namespace

@namespaceルールは、CSSで名前空間を定義するために使用されます。名前空間は、異なるスタイルシートのルールが衝突しないようにするための手段で、特にXMLドキュメント（例えば、SVGやMathMLなど）において有効です。このルールは、特にXMLベースのマークアップ言語に対してスタイルを適用する際に役立ちます。

概要

@namespaceは、CSS内でXML名前空間を定義し、指定された名前空間に関連する要素に対してスタイルを適用します。これにより、同じドキュメント内で異なるXML名前空間を持つ要素に対して異なるスタイルを適用することができます。

使用例

たとえば、SVG要素とHTML要素を含むドキュメントで、それぞれ異なるスタイルを適用したい場合に使用します。

書式

@namespaceの基本的な構文は以下の通りです：

@namespace <名前空間のURL> [<名前空間のプリフィックス>];

<名前空間のURL>: 対象となる名前空間のURI（Uniform Resource Identifier）を指定します。例えば、SVGの名前空間はhttp://www.w3.org/2000/svgなどです。
<名前空間のプリフィックス>: 任意で、名前空間に対する短縮名（プリフィックス）を指定することができます。指定しない場合、プリフィックスは自動的に設定されません。

使用例

以下に、@namespaceの使用例を示します。

XML要素に対するスタイルの適用

@namespace "http://www.w3.org/2000/svg";  /* SVG名前空間を指定 */

svg {
  width: 100%;
  height: 100%;
}

@namespace "http://www.w3.org/1999/xhtml";  /* HTML名前空間を指定 */

h1 {
  color: red;
}

この例では、@namespaceを使ってSVGとHTMLの名前空間を分け、それぞれの名前空間に対して異なるスタイルを適用しています。SVG要素に対しては幅と高さを指定し、HTMLのh1要素には赤色の文字色を適用しています。

複数の名前空間の使用

@namespaceを複数回使って、異なる名前空間に対してスタイルを適用することもできます。

@namespace "http://www.w3.org/2000/svg" svg;
@namespace "http://www.w3.org/1999/xhtml" html;

/* SVG要素にスタイルを適用 */
svg rect {
  fill: blue;
}

/* HTML要素にスタイルを適用 */
html body {
  font-family: Arial, sans-serif;
}

この例では、@namespaceでそれぞれの名前空間に対してプリフィックスを指定しています。SVGのrect要素に青色の塗りを指定し、HTMLのbody要素にはフォントを設定しています。

名前空間の重要性

名前空間は、異なるXML仕様に基づいた要素が同一のHTMLドキュメント内に共存する場合に特に重要です。例えば、WebページにSVGやMathMLを組み込む際、各要素が異なる名前空間を持つため、名前空間を正しく指定してスタイルを適用することが重要になります。

名前空間が必要な場合

SVG要素をHTMLドキュメントに埋め込む場合
MathMLをHTMLに組み込む場合
カスタムXML要素を使う場合

名前空間を正しく扱うことで、CSSスタイルが意図した要素にのみ適用され、他の要素への影響を避けることができます。

サポートされているブラウザ

@namespaceは、主にXMLベースのドキュメントで利用されるため、ブラウザのサポートは限られています。CSSの標準ではなく、主にSVGやMathMLなどの特定の仕様に関連するスタイルに対して使用されます。