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

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

「画像置換」のメリットとデメリット

　「画像置換」とは、（X）HTMLでマークアップしたテキストをCSSで画像に置き換えて表示させるテクニックです。（X）HTMLに手を加えることなく、CSSだけで画像を差し替えることができるため、デザインの変更や管理が容易になるというメリットがあります。

　「画像置換」は、テキストを不可視にしたうえで「background関連プロパティ」で背景画像を表示させる仕組みです。テキストを不可視化する手法はさまざまですが、それぞれに欠点があり、どれも完璧ではありません。かつてはシンプルに「display: none;」あるいは「visibility: hidden;」として、テキストを非表示に指定する手法が取られていましたが、音声ブラウザによっては該当箇所が読み上げられないという問題があることが分かってきました。そのため現在では、「text-indent: -9999px;」あるいは「left :-9999px;」というように負の値を指定して、テキストを画面外へ追いやる「オフレフト」という手法が取られることが多くなってきています。

　しかし「オフレフト」の手法も完璧でなく、「CSSは有効で画像は非表示」という環境では、テキストが画面外へ追いやられたまま画像も表示されなくなってしまうという欠点があります。このような環境でアクセスしているユーザーがどの程度いるのかについては、Webサイトによって異なると思いますが、例えばモバイル環境での利用や印刷時など、画像を表示／印刷しないように設定していたりすることも考えられます。

　従って、「画像置換」を使用すべきかどうかについては、メリットとデメリットを踏まえたうえで、そのWebサイトの方針によって決める必要があります。アクセシビリティ的には、CSSで表示を制御するよりも、適切なalt属性値とともにimg要素を使用した方がよいと言えますが、Webサイトの内容やターゲットユーザーの属性、メンテナンスのコストなど総合的に考えると「画像置換」の手法を採用した方がよい場合もあるでしょう。

　それでは「画像置換」のメリットとデメリットを踏まえたところで、「画像置換」を使ったロールオーバーの実装方法を見ていきましょう。

「画像置換」でロールオーバー効果を実装する

　前回の記事では、リスト項目を横並びに表示する方法として、li要素に「display: inline;」を指定してインライン化する方法と、「float: left;」を指定して後に続く項目を回りこませる方法の2つを紹介しました。今回は、背景画像のサイズに合わせてリスト項目の幅や高さを指定したいので、後者の「float: left;」を使用してリスト項目を横並びに表示させています。

　また、テキストを不可視にする方法としては、a要素に「text-indent: -9999px;」を指定して、テキストを画面外へ追いやる方法を採用しています。この例のように、text-indentプロパティに負の値を指定した場合、図8のようにクリッカブル領域のアウトライン（点線）が左側にはみだして表示されるブラウザがあります。これを回避するには、「outline: none;」と指定して、アウトライン（点線）そのものを表示しないよう指定するか、「overflow: hidden;」を指定して、はみ出す領域を隠すように指定するのが一般的です。

図8：クリッカブル領域のアウトライン（点線）がはみ出している例

　次の例では、図9のように、まずul要素にナビゲーションの背景画像を指定、子要素のli要素にそれぞれホバー時の画像を指定、孫要素のa要素にそれぞれ通常時の画像を指定、さらにリンク擬似クラスでホバー時に背景を無くすよう指定し、カーソルのホバー時には背景を透過させてli要素の背景が見える仕組みになっています。

図9：ロールオーバーの仕組み

［リスト9］（X）HTMLソース

<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>

［リスト10］CSSソース：「テキスト＋text-indentプロパティ（画像置換）」でロールオーバーを実装した例

ul#global_nav {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  width: 725px;
  height: 29px;
  background: url(nav-bg.gif) repeat-x;  /* 背景画像を表示 */
}
ul#global_nav li {
  float: left;  /* リスト項目を横並びに */
  width: 145px;  /*  リスト項目の幅を指定 */
}
ul#global_nav li a {
  height: 29px;
  display: block; /* ブロックレベル化 */
  text-indent: -9999px; /* テキストをオフレフトして不可視化 */
}

/* リスト項目それぞれのスタイリング */
ul#global_nav li#nav-home {
  background: url(nav-home-on.gif) no-repeat;  /* ホバー時の画像を指定 */
}
ul#global_nav li#nav-home a {
  background: url(nav-home.gif) no-repeat;  /* 通常の画像を指定 */
}

～以下、略～
 /* ホバー時に背景画像を表示しない */
ul#global_nav li a:hover {
  background-image: none !important;
}

図10：表示結果

まとめ

　今回は、ナビゲーションパーツを例に、メンテナンス性の向上を期待できる効果的なスタイリング例を紹介しました。次回からは、本連載の総まとめとして、段組レイアウトの実装方法を紹介したいと思います。