画像表示だけオフでも文字が表示されるCSS画像リンクを作る

画像表示オンの場合

画像表示オフの場合

これの、HTMLソースは次の通り。<a>タグの内側に空白の<span>タグを置いているところがミソです。

<a href="#" class="haribotekit">
  ボタン
  <span class="panel"></span>
</a>

これの、CSSソースは次の通り。

a.haribotekit{
	display:block;
	position:relative; top:0px; left:0px;
	width:180px; height:40px;
	overflow:hidden;
	background-color:#b3b8d1;
	color:#ffffff;
}
a.haribotekit span.panel{
	display:block;
	position:absolute; top:0px; left:0px;
	background-image:url("button_sample.gif");
	width:180px; height:40px;
}

要するに何が起こっているのかというと、次の図のような状態になっています。

まず、<a>タグはブロック要素に指定されていて、幅と高さが固定されています。FirefoxやSafariで際限なく文字を大きくしたときに崩れないように、 overflow:hidden; も付けています。そして、重要なのは position:relative; されている点。

<a>タグの中に入っている空白の<span>タグの背景画像に、ボタン画像が設定されています。<a>タグと同様に、ブロック要素になっており、幅と高さは<a>タグと一致する大きさになっています。これを、position:absolute; にすることで、<a>タグとぴったり重ね、そして、<a>タグよりも手前に表示させています。<span>タグは<a>タグの中に入っているので、これも同様にクリックすることができます。

こうすることで、様々なクライアント環境に対して、メニューの文字を最適なスタイルで表示することができます。

• スタイルシートがオンで画像もオンな場合は、画像リンクが表示される。
• スタイルシートがオンで画像だけオフな場合は、手前の<span>タグの背景画像が無視されて、後ろに隠れている<a>タグのテキストが表示される。
• スタイルシートがオフなら、ただのリンクとして表示される。

そして、このボタンの形状をスタイルシートに完全に任せることができれば、「フルブラウザや、メディアタイプが handheld のクライアントの場合にだけ軽量なデザイン」という出しわけも可能になるわけです。

ただし、バリデータによっては空白の<span>タグに警告が出たりしてヘコむのと、画像に 透過GIF や 半透過PNG を使うと後ろにあるリンクテキストが見えてしまうのが欠点。

今回紹介した方法は、リンク以外にも、見出しなどにも応用できます。もっと大胆に駆使しまくって応用すると、例えば次のようなコーディングも可能になります。

画像で表現された、複雑なレイアウト。

複雑なレイアウトのページは、エンタメ系サイトや企業、製品などの特設ページ、キャンペーンやプロモーションサイトでよく用いられる表現です。

• リンク1
• リンク2

スタイルシートをオフにしたり、スタイルシートはオンで画像だけオフにしたり、handheld 端末や Nintendo Wii のブラウザ(tv端末)、印刷プレビューなど、さまざまな条件で表示してみてください。

主にターゲットとするPCスクリーン端末に対しては、画像表現で複雑にレイアウトされた画面が表示され、その上にリンクのレイヤーがかぶさっています。(ここでは、tvとprintも同じ対応にしています)

従来は<img>タグとクリッカブルマップを使うか、細かくスライスして配置する方法で表現されてきたレイアウトですが、表現された文字量が多く、alt属性では表現しきれない内容です。上記の方法では、メインの画像の後ろに、しっかりマークアップされたHTMLが存在しているので、画像が上手く表示できないクライアント端末にも、適切な文書構造を提供することができます。

ちなみに、今回テストに使ったHTMLは、コチラからダウンロードできます。