カテゴリーごとやページごとで異なるスタイルを適用したいことがよくあるため、どのカテゴリーに含まれるどのページなのかをbody要素のidやclass属性として示しておくと便利。このテクニックを「CSSシグネチャ」といい、body要素のIDやクラスを手がかりに、カテゴリーごとに異なるスタイルを適用する方法です。
個別の要素にIDやクラスを追加したり、専用のCSSファイルをつくってlink要素で読み込む方法は効率的でなく、一定規模以上のサイトでは管理や対応がきわめて困難。CSSシグネチャを利用することで、多様で柔軟なデザインを少ないソースコードで実現できる。
CSSシグネチャを使った効率的なスタイルングの代表例は、「ナビゲーションで現在のカテゴリーやページを示すハイライト表示」とカテゴリーごとのキーカラーやキービジュアルの変更」のふたつがあげられます。body要素に対するIDとクラスの使い分けについては、クラスでカテゴリーを、IDでページを示すことが多い。
CSSシグネチャを利用する際は、きちんとしたルールのもとでIDとクラスを割り振ることが大切。たとえば、カテゴリーファイルを保存しているフォルダ名とbody要素のクラス名を一致させておいたり、ページのファイル名とID名を一致させておいたりなど。
●ナビゲーションで現在のカテゴリーやページを示すハイライト表示
グローバルナビゲーション（カテゴリーを移動するためのリンクリスト）やローカルナビゲーション（カテゴリーのなかでページを移動するためのリンクリスト）では、現在見ているカテゴリーやページを示すために、背景などを変えてハイライト表示にすることがある。
対応するリンクそのものに「id="hare"」や「class="now"」と指定し、スタイルを適用してもいいが、ページひとつひとつにこのような指定を加えるのではなく、すべてのページで同一のソースコードを利用したほうが効率的。
そこで、ナビゲーションに含まれるリンクそれぞれにあらかじめIDを振っておき、body要素のクラスを手がかりにスタイルの適用対象を変えることで、自動的にカテゴリーやページに対応するリンクがハイライト表示される、という方法を利用する。
<body class="ideas">
.....
<div id="global-nav">
<h2>主なカテゴリー</h2>
<ul>
<li><a id="nav-home" href="/">ホーム</a></li>
<li><a id="nav-ideas" href="/ideas"/>こだわり</a></li>
<li><a id="nav-shops" href="/shops/">店舗情報</a></li>
<li><a id="nav-profile" href="/profile">会社概要</a></li>
<li><a id="nav-contact" href="/contact/">お問い合わせ</a></li>
</ul>
</div>
子孫セレクタでbosy要素のクラスとリンクのIDを対応させておけば、カテゴリーごにと異なる部分のハイライト表示が実現できる。
/* ナビゲーション ハイライト表示 */
body.home #global-nav ul li a#nav-home,
body.ideas #global-nav ul li a#nav-ideas,
body.shops #global-nav ul li a#nav-shops,
body.profile #global-nav ul li a#nav-profile,
body.contact #global-nav ul li a#nav-contact {
background: url(../img/bcg_global-nav_hare.jpg) repeat-x left center;
}
●カテゴリーごとのキーカラーやキービジュアルの変更
カテゴリーごとで雰囲気を変えたい場合、背景や見出しに異なるカラーを指定したり、異なるキービジュアルを指定する方法がある。この場合もCSSシグネチャを活用できる。
カテゴリーごとに異なるクラスを割り振ったbody要素を手がかりに、変えたい部分を子孫セレクタで指定すれば、スタイルを変更することができる。
たとえば「body.ideas #main」とセレクタを指定し、異なるスタイルを適用すればいい。
カテゴリー「こだわり」に含まれるページでの指定
<body class="ideas">
.....
<div id="main">
<h1>こだわり</h1>
<p>Choco mint が大切にしていることは、納得できる素材のみで安心して食べられるスイーツを作ること。</p>
</div>
カテゴリー「店舗情報」に含まれるページでの指定
<body class="shops">
.....
<div id="main">
<h1>店舗情報</h1>
<p>本店の青山をはじめとした、表参道、六本木、広尾、渋谷の各店舗のご紹介です。</p>
</div>
※カテゴリーごとにbody要素のクラス名は変えていても、内容のマークアップは全く同じ
/* サイト全体の基本スタイル */
#main {
height: 100px;
}
#main h1 {
padding: 10px 0 5px 110px;
color: #600;
}
#main p {
padding: 0 0 0 110px;
}
/* カテゴリー「こだわり」用スタイル */
body.ideas #main {
background: url(../img/img_ideas.jpg) no-repeat left top;
}
/* カテゴリー「店舗情報」用スタイル */
body.shops #main {
background: url(../img/img_shops.jpg) no-repeat left top;
}
●XHTML+CSSのチェックに便利なツール
W3C Markup Validation Service http://validator.w3.org/
W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
FireFoxアドオン「Html Validator」https://addons.mozilla.jp/firefox/details/249
個人的にはFireFoxアドオンの「Web Developer」を教えてもらい使ってます。
テキストに載っている画像はさすがに使えないため、ソースを書き込んだ部分の具体的な絵がないので少しわかりにくいかもしれない。。。
今日はここまで。
0 件のコメント:
コメントを投稿