三十日目！（～ロールオーバー続き）

昨日の続き進めます。

次のようにグローバルナビゲーションを定義したXHTMLに、さまざまなテクニックでロールオーバー効果を設定していく。

XHTML
<ul id="nav">
   <li id="nav-top" class="current"><a href="/">トップページ</a></li>
   <li id="nav-service"><a href="/service/">サービス内容</a></li>
   <li id="nav-workflow"><a href="/workflow/">ご利用の流れ</a></li>
   <li id="nav-price"><a href="/price/"料金表</a></li>
   <li id="nav-estimate"><a href="/estimate/">自動見積</a></li>
   <li id="nav-faq"><a href="/faq/">よくあるご質問</a></li>
</ul>


●「テキストのみ」または「テキスト+background」で実現
「テキスト」のみではサンプルのようなデザインは実現できない。テキストをCSSでそれっぽくスタイリングしたり、backgroundプロパティで背景画像を指定することもできますが、デザインの完全再現はムリといえる。

●「テキスト+text-indent+background」で実現（画像置換）
a要素にテキストを含め、背景画像を指定しただけでは、背景画像の上にテキストが重なって表示されてしまう。テキストを非表示化する方法のひとつが、text-indentプロパティを利用すること。
たとえば、「text-indent: -9999px;」と指定する。

●li要素を横並びにする
サンプルではli要素に「float:left;」と指定することで、横並びにしている。「display:inline;」を使うこともできるが、その場合、行内に余白が確保されてしまうため、縦方向のmarginやpaddingを指定しても思い通りの表示ができない。

シンプルにテキストを横並びにするのであれば「display:inline;」を、グラフィカルで幅固定されたナビゲーションを横並びにするのであれば、「float:left;」を利用するというように適宜使い分ける。

●クリッカブル領域のアウトライン
text-indentプロパティをマイナス値で指定することで、a要素のクリッカブル領域のアウトライン（点線）がはみ出して表示されるブラウザがある。
これを回避するために「overflow:hidden;」と指定する。「outline:none;」ではクリッカブル領域を認識しづらくなる弊害があるため、「overflow: hidden;」のほうがよい方法である。

CSS
/* ナビゲーション全体のスタイリング */
ul#nav, ul#nav li, ul#nav li a {
  margin: 0;
  padding: 0;
  display: block;
  height: 28px;
}
ul#nav {
  background: url(bg.png) repeat-x;            /* 背景画像を横方向にリピート */
}
/* ナビゲーション項目に共通のスタイリング */
ul#nav li {
  float: left;                                           /* 項目を横並びにする */
  width: 100px;                                       /* 項目に含めた画像それぞれの幅は100px */
}
ul#nav li a {
  overflow: hidden;                                  /* クリッカブル領域の外にはみ出してしまうアウトライ                            ンを隠す */
  text-indent: -100000em;                       /* テキストを画面左側に追いやって見えなくする（オフレット） */
}
/* ナビゲーション項目それぞれのスタイリング */
ul#nav li#nav-top {
  background: url(hover/top.png) no-repeat;
}
ul#nav li#nav-top a {
  background: url(top.png) no-repeat;
}


・・・（中略）・・・


ul#nav li#nav-faq {
  width: 101px;
  background: url(hover/faq.png) no-repeat;
}
ul#nav li a:hover,
ul#nav li.current a {
  background-image: none !important;           /* ロールオーバー時に項目それぞれの背景画像を隠す */
}


次に、CSSだけでロールオーバー効果をどのように実現するか考えてみる。親要素のul要素にこのナビゲーション全体のリピート背景を指定、子要素のli要素それぞれにロールオーバー後の背景を指定、孫要素のa要素それぞれにロールオーバー前の背景を指定し、a要素の「:hover」（ロールオーバー時）だけ背景をなくすことで、li要素の背景が出現する仕組みでロールオーバーを実現している。

なお、現在表示しているページやカテゴリーに該当するli要素には「class="current"」と指定してはじめから背景をなくし、ロールオーバー後の背景が表示されるようにしている。

●CSS Sprites
このサンプルでは、リンクひとつひとつに対してそれぞれ単独の背景画像をしていしているが、画像をひとまとめにしてbackground-positionプロパティを使って位置指定する方法もある。

画像ファイルのリクエスト数を減らせる為、アクセス数の多い検索サイトやWebサービスなどでしばしば利用されているテクニックで、「CSS Sprites」と呼ばれている。


●「テキスト+display:none+background」で実現（画像置換）
text-indentプロパティを利用してテキストを非表示化するのではなく、「display:none;」で非表示化する方法もある。ただし、次のようにa要素のなかにspan要素を加えなければならない。

XHTML
<ul id="nav">
   <li id="nav-top" class="current"><a href="/"><span>トップページ</span></a></li>
   <li id="nav-service"><a href="/service/"><span>サービス内容</span></a></li>
   <li id="nav-workflow"><a href="/workflow/"><span>ご利用の流れ</span></a></li>
   <li id="nav-price"><a href="/price/"><span>料金表</span></a></li>
   <li id="nav-estimate"><a href="/estimate/"><span>自動見積</span></a></li>
   <li id="nav-faq"><a href="/faq/"><span>よくある質問</span></a></li>
</ul>


CSSはいたってシンプルで、span要素に対して「display:none;」と指定すれば非表示化される。

CSS
 ul#nav li a span {
   display: none;    /* テキストを非表示にする */
 }


ただし、音声ブラウザのなかには「display: none;」と指定された内容を読み上げないものがあり、text-indentプロパティを利用する方法に比べてアクセシビリティが低くなる。また構造とは無関係にspan要素を使う点も好ましくない。

●画像置換とSEOの関係
img要素を使わずに、CSSの「画像置換」というテクニックを利用する動機には、デザイン変更時にCSSだけを修正すれば済むという「メンテナンス性の向上」のほか、「SEO」もある。検索サービスのなかにはalt属性値を収集対象に含めないものがあるというわれており、（また、クローラーの挙動やアルゴリズムが変更される可能性があるため）、alt属性値よりも普通のテキストのほうが確実だから。
一方、検索サービス各社は、ガイドラインで「隠しテキストや隠しリンクは使用しないこと」としているため、違反するサイトはスパムと見なされ、大幅に検索順位が下がったり、検索結果に表示されなくなる（いわゆる「SEOスパムサイト」と判断されてしまう）恐れがある。Googleの「ウェブマスター向けガイドライン」を参照のこと。

ただし、Googleは「画像置換が視覚的なユーザーエクスペリエンスを改善するためであれば、スパムになると心配する必要はない」と述べているため、あからさまにスパム目的で無い限り問題はないと考えられる。

●「img要素+JavaScript」で実現
CSSの画像転換を利用したロールオーバーと異なり、従来通りimg要素を埋め込む方法は、CSSオン・画像表示オフ環境ではalt属性値が表示されるため、そこにどのような画像が埋め込まれているかユーザーに伝えることができる。デザイン変更時にすべてのXHTMLを修正する手間はありますが、どのような環境でも対応できる安全かつ確実な方法。

ただし、img要素だけではロールオーバーは実現できないので、専用のJavaScriptを用意したり、jQueryなどのJavaScriptライブラリを利用する。

なお、次のようにJavaScriptのイベントハンドラをimg要素に直接指定し、ロールオーバーを実現することもできるが、構造のなかに振る舞いの指定が含まれることになってしまうため、JavaScriptの外部ファイルから実行させるようがよい点に注意。

<img src="images/nav-top.gif" alt="トップページ"
onmouseover="this.src='images/nav-top_on.gif'"
onmouseout="this.src='images/nav-top.gif'"/>


ロールオーバーはHP作成となるとほぼ必須に近いテクニックだと思います。前回作成したHPでもトップページのサイドバーで使用されてましたが、作成した部分ではサイドバーは触れなかったため、まだ実践できてないので実際に試しに作成してみないと。。という感じです。

本日はここまで。