ナビゲーションの実践的なスタイリング

クロスブラウザなレイアウトデザインテクニック 第5回

現在位置をハイライト表示

　現在見ているページの位置情報を示すために、グローバルナビゲーションやローカルナビゲーションのリスト項目をハイライト表示させることがあります。他にも、カテゴリごとにカラーを変えたり、ページごとに背景を変えたりするなど、カテゴリやページごとに異なるスタイルを適用したい時があります。

図5：ハイライト表示の例

　このような時、専用のCSSファイルを作り、各ページのlink要素からそれぞれ読み込ませるという方法もありますが、あまり効率の良い方法とは言えません。あらかじめbody要素にIDやクラスを付けておき、それを手がかりにスタイルを振り分ければ、効率よくデザインを制御することが可能になります。

　まず次の図6のように、body要素にid属性やclass属性を付けておきます。ここでは、カテゴリごとにクラスを、ページごとにIDを付けています。

図6：body要素に、カテゴリごとにクラス、ページごとにIDを付ける

　ナビゲーション部分のコードでは、それぞれのリスト項目にIDを振っておきます。「id="now"」や「class="here"」などのコードをページごとに記述する方法もありますが、ナビゲーション部分のコードは全ページ共通とし、body要素のIDやクラスを手がかりにCSSを作り込む方がスマートです。

［リスト6］ハイライト表示の（X）HTMLソース：body要素にカテゴリのクラスを付け、ナビゲーションのリスト項目にIDを振っておく

<body class="product">
...
<ul id="global-nav">
  <li id="nav-home"><a href="...">ホーム</a></li>
  <li id="nav-product"><a href="...">製品情報</a></li>
  <li id="nav-solution"><a href="...">ソリューション</a></li>
  <li id="nav-support"><a href="...">サポート</a></li>
  <li id="nav-corp"><a href="...">会社概要</a></li>
</ul>

　CSSでは、子孫セレクタでbody要素のクラスとナビゲーションのリスト項目のIDを対応させるだけです。これで、そのカテゴリに属するページでは、ナビゲーション部分がハイライト表示されます。

［リスト7］ハイライト表示のCSSソース：body要素のクラスとナビゲーションのリンクのIDを対応させる

body.home ul#gloval-nav li#nav-home a
body.product ul#gloval-nav li#nav-product a,
body.solution ul#gloval-nav li#nav-solution a,
body.support ul#gloval-nav li#nav-support a,
body.corp ul#gloval-nav li#nav-corp a{
  background: url(here.gif) repeat-x left center;
}

CSSでロールオーバー効果を実装する

　カーソルのホバー時に背景色や背景画像が入れ替わる「ロールオーバー効果」は、カーソルアクションを視覚的に伝えることのできる効果的な表現方法です。ロールオーバー効果を実装する方法はさまざまですが、それぞれにメリットやデメリットがあり、どのWebサイトにも使えるオールマイティーなテクニックは存在しません。それぞれのメリットやデメリットを踏まえたうえで、そのWebサイトに合った方法を取るようにしましょう。

「テキスト＋backgroundプロパティ」でロールオーバー効果を実装する

　「img要素」と「JavaScript」を使用してロールオーバー効果を実装する方法は、実務でも一般的なテクニックですが、デザインの変更時にサイト内のすべての（X）HTMLを修正する必要が出てくることがあります。

　しかし、CSSを利用してロールオーバー効果を実装すれば、デザインの変更時にも、（X）HTMLに手を加える必要はなく、CSSを修正するだけで済みます。（X）HTML文書の汎用性が高まり、管理しやすくなるわけです。

　CSSでロールオーバー効果を実装する最もシンプルな方法は、リンクテキストに背景色や背景画像を設定することです。リンク擬似クラスを利用して、通常のスタイルとカーソルがホバー時の背景のスタイルを切り替える仕組みです。次の例では、カーソルのホバー時とアクティブ時に、通常のスタイルと異なる背景画像を設定し、ロールオーバー効果を実装しています。

［リスト8］CSSソース：「テキスト＋backgroundプロパティ」でロールオーバーを実装した例

ul#global_nav a {
  background: url(nav-off.gif) repeat-x left center;
}
ul#global_nav a:hover,
ul#global_nav a:active {
  background: url(nav-on.gif) repeat-x left center;
}

図7：表示結果

　「テキスト＋backgroundプロパティ」でロールオーバーを実装する方法は、とてもシンプルなテクニックではありますが、画像のみでの表現に比べると、見た目にもシンプルです。Webサイトによっては、少々物足りないビジュアル表現かもしれません。そこで次節から、JavaScriptを使用せずに、CSSだけでグラフィカルな視覚表現を可能にする「画像置換」というテクニックを紹介しましょう。