@namespace

namespaceとは、空間に名前を付けて識別名の衝突（重複）を防ぐ為のもので、@namespace で、namespace prefix（名前空間接頭辞）を宣言し、与えられた namespace name（名前空間名/文字列）と関連付けます。

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

最初に、namespace prefix（名前空間接頭辞）無しの default namespace（デフォルトの名前空間）を宣言します。namespace が明示されていないものは、この default namespace 「http://www.w3.org/1999/xhtml」が適用されることになります。

type selector（タイプセレクタ）との実用例

次に、namespace prefix「svg」を宣言し、namespace name「http://www.w3.org/2000/svg」と関連付けています。これにより「svg」が使われている所には「http://www.w3.org/2000/svg」が適用されることになります。

@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
svg|rect { fill: pink; }
svg|circle { fill: skyblue; }

HTML source

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   @namespace "http://www.w3.org/1999/xhtml";
   @namespace svg "http://www.w3.org/2000/svg";
   h1 { color: orange; }
   svg|rect { fill: pink; }
   svg|circle { fill: skyblue; }
  </style>
 </head>
 <body>
  <h1>SVGで描いた図形です。</h1>
  <svg width="230px" height="230px">
   <rect x="30" y="30" width="200" height="200" />
   <circle cx="100" cy="175" r="50" />
  </svg>
 </body>
</html>

display (inline frame)

※ svg とは、XML文書で点や線を使って画像や文字などを描画する（ベクター形式）ための言語です。 HTML5では、この svg を直接埋め込むことができるようになりました。 [svg/詳細] [ベクター形式/詳細]

上に戻る