« あんた最高だよ！ | Home | "ハレ晴れユカイ"の真実 »

20061013

テキストを画像に置換してみる～ナビゲーション編～

コンテンツのナビゲーションに<ul>などを利用している事が多いと思いますが、その内容を画像に置き換えるTipsを紹介です。
まずは一般的だと思われるナビゲーション部のソースです。

<div id="menu">
  <h2>メニュー</h2>
  <ul>
    <li><a href="./01.htm"> サンプル_01 </a></li>
    <li><a href="./02.htm"> サンプル_02 </a></li>
    <li><a href="./03.htm"> サンプル_03 </a></li>
    <li><a href="./04.htm"> サンプル_04 </a></li>
    <li><a href="./05.htm"> サンプル_05 </a></li>
  </ul>
</div>

そしてそれぞれの個所に表示させたい画像を作成します。
例のサンプルでは5個のコンテンツがありますので5種類の画像を用意するのですが、それぞれ単独で用意すると管理等が煩雑になってしまいますので（他にも理由はあるのですが…）全て連結させて1個の画像ファイルにしてしまいましょう。

■メニュー画像(見本)

ちなみに今回作成した見本は総hightが150ピクセル、widthが200ピクセル。つまり30×200pxの画像が縦に5つ連結したモノ、となっております。

さて、実際の作業に入りましょう。
まずはhtmlソース部です。<li>タグにそれぞれIDを指定してやりましょう。

<div id="menu">
  <h2>メニュー</h2>
  <ul>
    <li id="menu_01"><a href="./01.htm"> サンプル_01 </a></li>
    <li id="menu_02"><a href="./02.htm"> サンプル_02 </a></li>
    <li id="menu_03"><a href="./03.htm"> サンプル_03 </a></li>
    <li id="menu_04"><a href="./04.htm"> サンプル_04 </a></li>
    <li id="menu_05"><a href="./05.htm"> サンプル_05 </a></li>
  </ul>
</div>

そして次に見栄えを制御するCSSです。

#menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}

#menu li a{
	display:block;
	height:20px;
	width:150px;
	text-indent:-9999px;
	}

#menu_01 a{
	background: url(画像へのパス);
	}

#menu_02 a{
	background: url(画像へのパス) 0 -30px;
	}

#menu_03 a{
	background: url(画像へのパス) 0 -60px;
	}

#menu_04 a{
	background: url(画像へのパス) 0 -90px;
	}

#menu_05 a{
	background: url(画像へのパス) 0 -120px;
	}

一つの大きな背景画像をずらして表示させてるってのがミソ。当然ながらずらす数値は作成した画像のサイズによって変化いたしますので、そこらへんはフレキシブルに。

なんと言ってもこの手法のメリットは

<a href="./01.htm"><img src="画像へのパス" alt="代替テキスト" /></a>

こんな風にhtmlに直で画像を指定するのとは違い、スタイルシートに対応していないブラウザでは（そして当然テキスト・ブラウザでも）極シンプルに単なるテキストデータのリンクとして扱われる、というアクセシビリティにおけるメリット。そして扱うファイル数の減少によるメンテナンスの容易化、そしてサイト全ての一括変更が可能になる（外部スタイルシートファイルの使用が前提となりますが）という管理者サイドでのメリット。つまりはユーザー及び管理者の双方のそれぞれのメリットが発生いたします。
また、さらに擬似クラス:hoverを利用すればロールオーバー効果をも簡単に付与させる事も可能になります。 その場合は、背景画像にロールオーバー時の画像もまとめてしまいましょう。

■メニュー画像(見本)

こんな風に。
で、あとは先程と同じ要領でそれぞれのidに:hoverの設定を割り当てるだけです。

#menu_01 a:hover{
	background: url(画像へのパス) 200px 0;
	}

#menu_02 a:hover{
	background: url(画像へのパス) 200px -30px;
	}

#menu_03 a:hover{
	background: url(画像へのパス) 200px -60px;
	}

#menu_04 a:hover{
	background: url(画像へのパス) 200px -90px;
	}

#menu_05 a:hover{
	background: url(画像へのパス) 200px -120px;
	}

動作見本
今回の例ではテキストも含めて完全に画像にしてみましたが、ブログなどではなかなかそうする事が難しい場合もありますね。その場合は背景だけの画像を用意し、背景+テキストという形でも充分動的な演出が可能ですので、是非一度お試しあれ。（その場合は当然スタイルシートの"text-indent"の設定は不要になりますので削除してくださいね～）

見栄えと情報の分離、というスタイルシートの基本理念から考えると、非常にまっとうな使い方だと思うのですが如何なものでしょうか。

▲ [CLAP]

トラックバック

このエントリーのトラックバックURL:
http://magokorokikaku.com/mt/mt-tb.cgi/11

▲