LIQUID DESIGN Tech Blog

CSSシグネチャとは?メリットと実用TIPS

CSSシグネチャとは

CSSシグネチャとは、ページのbodyなどにidやclassを設定し、
CSSでページごとのスタイルの切り替えを行う手法です。
シグネチャ(signature)は直訳すると署名、サインの意味です。

最近あまりこの言葉を目にすることがなくなりました(Twitterでは1件もヒットしませんでした・・)が、
便利な手法なので紹介します。

なお、ユーザーがブラウザの「ユーザースタイルシート」を
設定できるようにする手法という意味もあるようですが、
今回は前者について紹介します。

CSSシグネチャの解説

CSSシグネチャを利用すると、トップページとカテゴリページで
一部デザインを変える、ナビゲーションデザインで閲覧中ページが分かるようする、
といったことが、ひとつのCSSで簡単にできます。
xoopsnavi.jpg

メリット

  • ページごとのデザインをひとつのCSSで指定できる
  • ページごとにデザインが変わる要素が、ページ内に複数あっても、HTMLにはbodyにidを書くだけで良い
  • ページごとにデザインが変わる仕組みを、バックエンドで行う必要がない

CSSシグネチャの使い方

HTML

bodyなどにidやclassを設定します。

<!-- トップページ --><br /> <body id="index">
<!-- カテゴリページ --><br /> <body id="category">

CSS

CSSセレクタでスタイルを適用するページを選択します。

/* indexページ */<br /> #index .exsample {<br /> font-weight: normal;<br /> }
/* categoryページ */<br /> #category .exsample {<br /> font-weight: bold;<br /> }

jQuery

jQueryを利用している場合も、セレクタで適用するページを選択できます。

$(function() {<br /> $(&#8216;#category .exsample&#8217;).exsample;<br /> });

Movable Type

Movable Type のデフォルトテンプレートには、
あらかじめ下記のclassがbodyに設定されています。

  • mt-main-index (インデックステンプレート)
  • mt-entry-archive (ブログ記事テンプレート)
  • mt-page-archive (ウェブページテンプレート)
  • mt-archive-listing (アーカイブテンプレート共通)
  • mt-datebased-monthly-archive (月別テンプレート)
  • mt-category-archive (カテゴリ別テンプレート)
  • mt-search-results (検索結果テンプレート)

XOOPS

XOOPSでも、テンプレート変数を利用して、
bodyにモジュール固有のidを追加することができます。

Dreamweaver

Dreamweaverで、テンプレートを利用する場合も、「属性を編集可能にする」ことで
各ページのbodyの属性を編集できるようになります。

via

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
SNSでフォローする