ネットサーフィンをしているとき、このWebサイトはこういうデザインで見たい、あのWebサイトはああいうデザインで見たい、と、別々のユーザCSSを当てたくなるときがありませんか。
その度ごとに別のユーザCSSファイルを当てることも可能ですが、それよりは一つのユーザCSSファイルで済ませられるほうが楽です。
WebサイトにCSSシグネチャ（signature）が設定してあれば、それが可能になります。
閲覧者がそれを実現できるようにするためにも、あなたがWebサイト管理者ならば、自分のWebページに是非CSSシグネチャを設定しましょう。
設定方法は至って簡単です。全ページのbody要素に同じid属性を付けるだけになります。
<body id="WWW-EXAMPLE-COM">但し、CSSシグネチャが他のサイトと被ってしまっては、その被ったWebページと別の設定を行うことが不可能になります。
ですから、絶対に被らないようにするためには、全世界で一意のIDを設定する必要があります。そこで、絶対に一意となるはずのURLを利用します。
| URL | CSSシグネチャ用id |
|---|---|
| http://example.com/またはhttp://www.example.com/ | WWW-EXAMPLE-COM |
| http://example.co.jp/またはhttp://www.example.co.jp/ | WWW-EXAMPLE-CO-JP |
| http://example.com/userid/またはhttp://example.com/~userid/ | WWW-EXAMPLE-COM-USERID |
| http://userid.example.com/ | WWW-USERID-EXAMPLE-COMまたはWWW-EXAMPLE-COM-USERID |
先頭に「WWW」を入れるのは、当Webサイトのドメインのように数字で始まる場合、id属性値にできないからです。
そしてこれを読んでピンと来た方もいらっしゃるかと思いますが、これでも実際にはIDが重なってしまうこともあります。上の例では、http://www-example.com/とhttp://www.example.com/は同一のIDになるからです。
この命名規則の曖昧さから来る不適当はいずれ解消され、命名規則はこの通りにならなくなる可能性もあることは、憶えておいてください。
今度は設定したCSSシグネチャを利用する方法です。
ユーザCSSを開き、通常のCSSでのIDセレクタと同様の使い方をします。
以下は、WWW-EXAMPLE-COMというCSSシグネチャを持ったWebサイトと、WWW-EXAMPLE-COM-USERIDというCSSシグネチャを持ったWebサイトで、別々の文字色を設定したい場合の例です。
<body id="WWW-EXAMPLE-COM"><body id="WWW-EXAMPLE-COM-USERID">この二つのWebサイトに対し、ユーザCSSは一つになります。
body#WWW-EXAMPLE-COM { /* http://example.com/用 */
color : red;
}
body#WWW-EXAMPLE-COM-USERID { /* http://example.com/userid/用 */
color : blue;
}これだけで、（CSSシグネチャを設定してある）http://example.com/のWebページの文字色は赤に、http://example.com/userid/のWebページの文字色は青になります。
管理者として幾つものWebサイトを運営している場合、デザインを共通のものにするということは良くあります。
そのとき、同じ内容のCSSファイルを各サーバに別々に置いて呼び出すという手もありますが、管理を楽にするため、別々のWebサイトから同じCSSファイルを呼び出すという手も、良く使われます。
後者の場合において、それでもサイト毎に一部分、スタイルを変更したい場合にも、設定してあるCSSシグネチャは役に立ちます。
以下はhttp://example1.com/とhttp://example2.com/で、CSSファイルを共有してデザインの統一を図り、かつh1の見出し画像だけを各サイト毎に違う画像にしたい場合の例です。
<body id="WWW-EXAMPLE1-COM"><body id="WWW-EXAMPLE2-COM">この二つのWebサイトに対し、CSSは一つになります。
body#WWW-EXAMPLE1-COM h1 { /* http://example1.com/用 */
background-image : url(example1.jpg);
}
body#WWW-EXAMPLE2-COM h1 { /* http://example2.com/用 */
background-image : url(example.jpg);
}これだけで、（CSSシグネチャを設定してある）http://example1.com/のWebページのh1背景画像はexample1.jpgに、http://example2.com/のWebページのh1背景画像はexample2.jpgになります。
CSSシグネチャのためidを設定したbody要素には、別に分類のためにclass属性を設定してある場合もあると思います。
「別サイトで共有するCSSをサイト毎に一部変更」では同一CSSシグネチャ間ですべて同じになってしまいますが、更にその中でもclass毎に設定を変えたい場合、以下のようにします。
言い換えれば、bodyにidとclassが設定してあり、id＝CSSシグネチャ、かつclass＝exampleのときのみに適用させたいプロパティがある場合の例、となります。
<body id="WWW-EXAMPLE1-COM" class="aaa"><body id="WWW-EXAMPLE1-COM" class="bbb"><body id="WWW-EXAMPLE2-COM" class="bbb">この際、ただ
body#WWW-EXAMPLE1-COM h1 {（中略）}と設定してしまうと、http://example1.com/内のbody class="aaa"のページにもbody class="bbb"のページにも適用されてしまいます。
そのため、http://example1.com/内でclass="aaa"とclass="bbb"で別々のプロパティを割り当てたいときは、アンド検索のようなセレクタパタンマッチングが必要になります。
body#WWW-EXAMPLE1-COM.aaa h1 { /* http://example1.com/でclass="aaa"のページ用 */
background-image : url(example1.jpg);
}
body#WWW-EXAMPLE1-COM.bbb h1 { /* http://example1.com/でclass="bbb"のページ用 */
background-image : url(example3.jpg);
}
body#WWW-EXAMPLE2-COM.bbb h1 { /* http://example2.com/でclass="bbb"のページ用 */
background-image : url(example2.jpg);
} ただのIDセレクタの場合も要素名#idと並べることでbody要素とid値のアンドパタンマッチングが可能でしたが、idとclassの場合も同様です。
要素名#id.classになります。