CSSシグネチャ
サイトを作成していると、特定のページやカテゴリに他のスタイルとは異なるスタイルを適用させるテクニックです。今回はこのCSSシグネチャについて書いていきたいと思います。
デザイン例
1、2で使われているソース↓ <div id="main"><!-- main_start --> <h3>新鮮な魚</h3> <div class="item"><!-- item_start --> <h4>今が旬の鰹だよ鰹♪</h4> <img src="bonito.jpg" alt="鰹のたたき"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div><!-- item_end --> </div><!-- main_end -->
画像は二つとも同じソースコードになります。HTMLの構造は全く同じですが、装飾に利用しているキーカラーが全く異なります。このようにページやカテゴリえ少しだけ異なるデザインを提供する際に利用できるのがCSSシグネチャです。
方法としてはbody要素に異なるID属性、またはclass属性を割り当て、それぞれに対してCSSで定義する
CSSシグネチャを利用したソース(HTML)
<body id="season"> 松茸のbody要素
<body id="fish"> 鰹のbody要素
bodyにid指定をしている
CSSのソース(一部)
/*-- ボックス生成 --*/
#main{
margin:-155px 0 0 -225px;
position: absolute;
top:50%;
left:50%;
width:448px;
border-style:solid;
border-width:1px;
background-color:#EDECBA;
}
.item{
padding:0 1em;
}
/*-- 画像のスタイル --*/
.item img{
width:200px;
height:150px;
float:left;
display:inline;
margin-right:1em;
}
/*-- テキストのスタイル --*/
#main h3{
padding:0.5em 0;
margin-bottom:0.8em;
text-indent:1em;
font-size:16pt;
}
#main .item h4{
margin-bottom:0.8em;
position:relative;
left:52%;
font-size:13pt;
color:#804000;
}
#main .item p{
margin-bottom:0.8em;
font-size:9pt;
letter-spacing:0.5em;
text-shadow: 1px 1px #fff;
}
/*----
季節の料理
-----------------------------------*/
body#season #main h3{
color:#fff;
background:-moz-linear-gradient(top, #00990e,#00561F);
background:-webkit-gradient(linear,left top,left bottom, from(#00990e),to(#00561F));
}
/*----
新鮮な魚
-----------------------------------*/
body#fish #main h3{
color:#fff;
background: #66acd0;
background:-moz-linear-gradient(top, #66acd0,#185778);
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