章 CSS 55 - SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen

6.1 CSS の基礎

6.1.1 CSSの基礎の基礎

XML文書を表示するために使われる、色、線、フォントなどの属性は、総称して「スタイル」

(style)と呼ばれます。XML文書のスタイルは、CSS(Cascading Style Sheets)などの言語を使うことによって記述することができます。CSSは、W3Cによって勧告されている標準規格のひとつです。

SVGによって記述されるグラフィックスは、そのスタイルについてもSVG自身で記述することが可能です。しかし、CSSを使ってグラフィックスのスタイルを記述するということも可能です。CSSを使うことによって、スタイルの記述をSVG文書から分離することができますので、

いくつかのSVG文書のスタイルを一箇所にまとめて記述するということが可能になります。

スタイルを記述した文書は、「スタイルシート」(style sheet)と呼ばれます。そして、スタイルシートが格納されているファイルは、「スタイルシートファイル」(style sheet file)と呼ばれます。CSSで書かれたスタイルシートが格納されているスタイルシートファイルのファイル名には、通常、.cssという拡張子を付けます。

6.1.2 スタイルシート処理命令

スタイルシートによって記述されたスタイルをSVG文書に適用したいときは、XML宣言とルート要素とのあいだに、「スタイルシート処理命令」(style sheet processing instruction)と呼ばれるものを書きます。

スタイルシート処理命令というのは、

<?xml-stylesheet type=" MIMEタイプ " href=" URI "?>

という構文を持つ文字列のことです。この中に書く「MIMEタイプ」(MIME type)というのは、

言語またはデータ形式を示すために使われる、

トップレベルタイプ名 / サブタイプ名

という形式の文字列のことです。CSSのMIMEタイプは、text/cssという文字列です。

スタイルシート処理命令の中の「URI」のところには、スタイルシートファイルのURIを書きます。SVG文書のファイルとスタイルシートファイルとが同じディレクトリの中にある場合は、スタイルシートファイルのファイル名がURIになります。

たとえば、CSSで書かれたスタイルシートが、rect.cssというファイルに格納されていて、

そのファイルがSVG文書と同じディレクトリにあるとすれば、そのSVG文書のXML宣言とルート要素とのあいだに、

<?xml-stylesheet type="text/css" href="rect.css"?>

というスタイルシート処理命令を書くことによって、そのスタイルシートによって記述されたスタイルをそのSVG文書に適用することができます。

次のスタイルシートは、青色で塗りつぶすというスタイルを長方形に適用する、ということを CSSで記述したものです。

スタイルシートの例 rect.css rect { fill: blue; }

56 第6章 CSS

次のSVG文書によって表示される長方形に対しては、上のスタイルシートによって記述されたスタイルが適用されます。

SVG文書の例 sspi.svg

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="rect.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

</svg>

6.1.3 スタイルシートを書くための要素

スタイルシートは、SVG文書の中に埋め込むことも可能です。

SVGは、スタイルシートを書くための要素型として、styleという要素型を定義しています。

スタイルシートは、style要素の子供として書くことができます。

style要素を書くときは、それが持っているtypeという属性に、スタイルシートを書くため

に使われている言語のMIMEタイプを設定する必要があります。すでに述べたとおり、CSSの MIMEタイプは、text/cssです。

6.1.4 CDATAセクション

XML文書の中にXMLではない文書を埋め込む場合は、通常、「CDATAセクション」(CDATA section)というものが使われます。

CDATAセクションというのは、<![CDATA[という文字列で始まって、]]>という文字列で終わる文字列のことです。それらの文字列に囲まれた部分には、どんな文字列を書いてもかまいません（ただし、]]>という文字列だけは書けません）。

XML文書の中に書かれたCDATAセクションは、XMLの文字列として解釈されるのではなくて、純粋に文字列として解釈されます。ですから、そこにどんな文字列を書いたとしても、XML 文書の構造に影響を与えることはありません。

style要素の子供としてスタイルシートを書く場合も、通常、CDATAセクションを使って次

のように書きます。

スタイルシート ]]></style>

次のSVG文書は、長方形を緑色で塗りつぶすというスタイルを、style要素の中でCSSを使って記述しています。

SVG文書の例 style.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

rect { fill: green; } ]]></style>

</svg>

6.2 ルール

6.2.1 ルールの基礎

スタイルシートというのは、基本的には、「ルール」(rule)と呼ばれる記述がいくつか並んだものだと考えることができます。

6.2. ルール 57 ルールというのは、「どのようなスタイルをどのような部分に適用するのか」ということを記述したもののことです。たとえば、

rect { fill: blue; }

というルールを書くことによって、「青色で塗りつぶすというスタイルを長方形に適用する」ということを記述することができます。

すべてのルールは、

セレクター宣言ブロック

という構文にしたがって書かれます。たとえば、

rect { fill: blue; }

というルールの場合は、rectという部分がセレクターで、

{ fill: blue; }

という部分が宣言ブロックです。

6.2.2 セレクター

「セレクター」(selector)というのは、スタイルを適用する対象を記述したもののことです。セレクターとして要素型名を書くと、その要素型を持つすべての要素に対して、宣言ブロックで記述されたスタイルが適用されます。たとえば、

circle { fill: red; }

というルールを書くことによって、すべてのcircle要素のグラフィックス（つまり円）を赤色で塗りつぶすことができます。

6.2.3 宣言ブロック

宣言ブロックは、かならず、左中括弧({)で始まって、右中括弧(})で終わります。そして、その中に、「宣言」(declaration)と呼ばれるものを書きます。宣言は、ひとつの宣言ブロックの中に何個でも好きなだけ書くことができます。たとえば、

{ fill: green; stroke: aqua; }

という宣言ブロックの中には、「緑色で塗りつぶす」という宣言と「線の色を水色にする」という宣言とが含まれています。

6.2.4 宣言

宣言というのは、「スタイルの特定の種類に対して、それをどうするのか」ということを記述したもののことです。すべての宣言は、

プロパティー : 値 ;

という構文にしたがって書かれます。たとえば、

fill: green;

という宣言の場合は、fillという部分がプロパティーで、greenという部分が値です。

「プロパティー」(property)というのは、スタイルの種類をあらわしている名前のことです。

たとえば、fillというのは塗りつぶしの色というスタイルの種類をあらわしているプロパティー

で、strokeというのは線の色というスタイルの種類をあらわしているプロパティーです。

「値」(value)というのは、プロパティーで指定された種類のスタイルをどうするのかという具体的な記述のことです。

6.2.5 ホワイトスペースと注釈

CSSでは、単語の前後に任意の個数のホワイトスペースを挿入することができます（ただし、

コロン(:)の左側にホワイトスペースを挿入することはできません）。そして、ホワイトスペースの有無はスタイルシートの意味を変化させません。

CSSでは、/*で始まって*/で終わる文字列は注釈とみなされます。注釈は、途中に改行を含んでいてもかまいません。

58 第6章 CSS

6.3 セレクター

6.3.1 クラスセレクター

SVGの主要な要素は、classという属性を持っています。これは、「クラス名」(class name) と呼ばれる名前を設定する属性です。いくつかの要素のclass属性に対して同一のクラス名を設定することによって、それらの要素がひとつのクラスに所属しているということを示すことができます。

クラスを指定するセレクターを書くことによって、ひとつのクラスに所属する複数の要素に対して同一のスタイルを適用する、ということが可能です。クラスを指定するセレクターは、「クラスセレクター」(class selector)と呼ばれます。

クラスセレクターは、要素型名の右側にドット(dot)を書いて、そのさらに右側にクラス名を書いたもの、つまり、

要素型名

.

クラス名

という形の記述です。このようなセレクターを書くことによって、ドットの左に書かれた要素型名で指定された要素のうちで、ドットの右に書かれたクラス名がclass属性に設定されているものだけに対してスタイルを適用することができます。たとえば、

rect.special

というセレクターを書くことによって、specialというクラス名がclass属性に設定されているrect要素だけに対してスタイルを適用することができます。

クラスセレクターは、要素型名を省略して、

.

クラス名

という形のものを書くこともできます。この場合は、要素型を問わず、記述されたクラス名が設定されているすべての要素に対してスタイルが適用されることになります。

スタイルシートの例 class.css rect.normal { fill: blue; } rect.special { fill: red; } .deluxe { fill: green; }

SVG文書の例 class.svg

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="class.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

</svg>

6.3.2 IDセレクター

スタイルを適用する対象を、要素のid属性に設定された属性値、つまり要素の名前で指定するセレクターを書くことも可能です。そのようなセレクターは、「IDセレクター」(ID selector) と呼ばれます。

IDセレクターは、シャープ(sharp)の右側に名前を書いたもの、つまり、

# 名前

という形の記述です。このようなセレクターを書くことによって、シャープの右側に書かれた名前がid属性に設定されている要素に対してスタイルを適用することができます。たとえば、

#id000

ドキュメント内 SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen (ページ 55-62)