サイトを作成していると、特定のページやカテゴリに他のスタイルとは異なるスタイルを適用させるテクニックです。今回はこのCSSシグネチャについて書いていきたいと思います。
デザイン例
02 | <div id="main"><!-- main_start --> |
04 | <div class="item"><!-- item_start --> |
06 | <img src="bonito.jpg" alt="鰹のたたき"> |
07 | <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
08 | <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
09 | <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> |
10 | </div><!-- item_end --> |
11 | </div><!-- main_end --> |
画像は二つとも同じソースコードになります。HTMLの構造は全く同じですが、装飾に利用しているキーカラーが全く異なります。このようにページやカテゴリえ少しだけ異なるデザインを提供する際に利用できるのがCSSシグネチャです。
方法としてはbody要素に異なるID属性、またはclass属性を割り当て、それぞれに対してCSSで定義する
CSSシグネチャを利用したソース(HTML)
bodyにid指定をしている
CSSのソース(一部)
03 | margin:-155px 0 0 -225px; |
10 | background-color:#EDECBA; |
46 | text-shadow: 1px 1px #fff; |
54 | background:-moz-linear-gradient(top, #00990e,#00561F); |
55 | background:-webkit-gradient(linear,left top,left bottom, from(#00990e),to(#00561F)); |
64 | background:-moz-linear-gradient(top, #66acd0,#185778); |
65 | background:-webkit-gradient(linear,left top,left bottom, from(#66acd0),to(#185778)); |
一定規模以上のサイトで、同じデザインで少しだけスタイルが違うパーツに対して、それぞれの要素にclas属性を割り振っていてはHTMLが複雑になります。CSSシグネチャではページとしてキーを設定し、管理が困難になるのを防ぐことが可能です。
一般的にCSSシグネチャを使用する際、ページ単位の場合はID属性、カテゴリ単位の場合はclass属性を使用することが多いみたいです。
CSSシグネチャの問題点
CSSシグネチャは非常に便利なテクニックですが、デザインの再利用性が乏しいです。また、トップページ等ではCSSシグネチャを流用するには難しいです。CSSシグネチャはあくまでページ単位やカテゴリ単位で利用する事になります。
CSSシグネチャを利用したサンプルのファイルを用意してあります。実際に見てみたいという方はダウンロードして確認してください。尚、サンプルファイルではCSSシグネチャを利用している箇所では画像を使っていないため、IEとfirefox、safari、choromeと表示形式が異なります。
IE6〜8は一部のCSSに対応していないのでデザインで紹介している画像のように表示されません。IE以外のブラウザで試してください。また、Operaでは検証していないのにで表示されるかされないかわかりません。
個人支援・寄付について
サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。
- ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS
