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

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

　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。今回は前回に引き続き、より実践的なテクニックとして、「ナビゲーション」を例にクロスブラウザな表示を意識したスタイリング方法を紹介していきたいと思います。

はじめに

　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。

　前回の記事では、ナビゲーションのマークアップに使われる代表的な要素として、a要素やリスト関連の要素（ul要素、ol要素など）を中心に取り上げ、これら要素のプレゼンテーションをコントロールする基本的なテクニックを紹介しました。今回は、これらのテクニックを組み合わせ、「グローバルナビゲーション」や「パンくずリスト」などのナビゲーションパーツをスタイリングする方法を紹介します。

対象読者

• XHTMLとCSSの基本を理解している方。
• Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。

必要な環境

　クロスブラウザなデザインを目指すうえでターゲットとする視覚系ブラウザを一通りご用意ください。本稿では、Web標準を比較的よくサポートしているFirefox、およびユーザ数が多く表示上の問題の多いWindows Internet Explorer 6を中心に解説していますが、できるだけ多くの種類／バージョンのブラウザで表示確認をするのが望ましいでしょう。

現在位置を示すナビゲーションのスタイリング

　閲覧中のページが、そのWebサイトの中のどの位置にあたるのか、現在位置を示してあげるとユーザビリティが高くなります。ここでは「パンくずリスト」と、「カテゴリのハイライト表示」で現在位置を示す効果的なスタイリング方法を紹介します。

パンくずリストのスタイリング

　現在閲覧中のページの位置を、上位階層からのリンクリストで示した垂直方向のナビゲーションを「パンくずリスト」と言います。区切り記号には「＞」（大なり記号）が使われるのが一般的で、「ホーム ＞ 採用情報 ＞ 中途採用」というように表現され、ユーザーが現在位置を直感的に把握するのに役立ちます。

　パンくずリストをどのようにマークアップするかはそれぞれで、シンプルにdiv要素やp要素を使用したり、ホームからの道順を示すという意図でol要素を使ったり、ul要素を入れ子にすることで階層を表現したりとさまざまです。

　div要素やp要素を使用する場合には、リンク項目が横一列に並びますから、CSSがオフの状態でも、項目の区切りが分かるようにするのがポイントです。次の例では、p要素を使い、区切り文字を実体参照でマークアップしています。ここでは、音声で読み上げられることを考慮して、いきなりリンク項目を列挙するのではなく、「このページの位置情報」という、パンくずリストの見出しを付けています。こうすることで唐突感がなく、ワンクッションおくことができるのではないかと思います。

［リスト1］（X）HTMLソース：区切り記号を実態参照で示した例

<div id="topic_path">
  <h2>このページの位置情報</h2>
  <p><a href="...">ホーム</a><span>&gt;</span><a href="...">採用情報</a><span>&gt;</span>中途採用</p>
</div>

　もし見出しを表示したくない場合には、見出し領域の大きさを、width/heighプロパティで「0」に指定し、はみ出した部分を「overflow: hidden;」として表示しないように指定します。この例では区切り文字を、spanタグで囲んでいるためコードは増えますが、これをセレクタとして利用することで、区切り文字のスタイルを調整したり、変更したりしやすくなります。

［リスト2］CSSソース

/* 見出しを不可視化 */
div#topic_path h2 {
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 区切り記号の左右の間隔を調整 */
div#topic_path p span {
  padding: 0 0.5em;
}

図1：スタイル適用前／見出しが表示され、区切り記号がやや詰まって見える

図2：スタイル適用後／見出しを不可視化し、区切り記号の間隔を調整

　また、区切り文字を画像にし、alt属性値に「の中の」と指定する方法もあります。後述する「画像置換」のようなトリッキーな方法を使わないストレートな方法です。

［リスト3］（X）HTMLソース：区切り記号を画像（img要素）にし、alt属性値に「の中の」を指定した例

<div id="topic_path">
  <h2>このページの位置情報</h2>
  <p><a href="...">ホーム</a><img src="arrow.gif" alt="の中の" /><a href="...">採用情報</a><img src="arrow.gif" alt="の中の" />中途採用</p>
</div>

　区切り記号をマークアップしたくない場合には、ul要素やol要素などリスト関連の要素でマークアップするのが一般的です。リスト項目は縦に列挙されることから、CSSがオフの状態でも区切りが明確なため、あえて区切り記号をマークアップする必要はないでしょう。横並びに表示するには「float: left;」を指定し、区切り記号はbackgroundプロパティで背景画像として表示させます。区切り記号を背景画像として表示させることで、シンプルな（X）HTMLコードを保持できます。

［リスト4］（X）HTMLソース：ul要素でマークアップした例

<div id="topic_path">
  <h2>このページの位置情報</h2>
  <ul>
    <li><a href="...">ホーム</a></li>
    <li><a href="...">採用情報</a></li>
    <li>中途採用</li>
  </ul>
</div>

［リスト5］CSSソース：横並びにして区切り記号を背景画像として表示

div#topic_path ul li {
  list-style-type: none;
  float: left;
}
div#topic_path ul li a {
  padding-right: 14px;
  background: url(arrow.gif) no-repeat right;
}

図3：スタイル適用前／リスト項目として縦並びに表示

図4：スタイル適用後／横並びにして区切り記号を表示