Lesson 08 ブロック要素の全体をリンク領域に設定する- Webデザイン表現&技法の新・スタンダード・インタラクション編

Webデザイン 表現&技法の 新・スタンダード

Lesson 8

ブロック要素の全体を リンク領域に設定する

	制作・文			高橋としゆき（Graphic Arts Unit）
＞	To Use			CSS
＞	Browser			IE 7over | Firefox 3over | Safari 5over

a要素によるリンクはテキストか画像単体に設定するのが通常だが、複数の要素が入ったブロック要素全体をリンク領域に設定することもできる。さらにマウスオーバーで背景色を変更して、ユーザビリティに配慮した作りにする。

最初に、完成したときのデザインと実装する動作を決めておこう。ここでは1つの枠内にサムネイル画像1点と、説明文を1点入れる。この枠全体がリンク領域になっており、枠内のどこをクリックしても詳細情報へアクセスできるようにす るのが目標だ。完成した際のデザインは【1-1】の状態で、さらにマウスオーバーすることで【1-2】のように背景色が変わるようにする。


【1-1】通常


【1-2】マウスオーバー時

ここからはHTMLの記述だ。はじめに、画像と説明文テキスト、さらに、リンク先を設定した「More...」というテキストをマークアップする。この「More...」のテキストは、最終的には表示されることはないが、リンク領域を設定するために必要な要素だ。最後にこれら全体をdiv要素で囲み、「class="alllink"」を付加しておく【2-1】。


【2-1】画像はdiv要素、テキストはdl要素でマークアップした。リンク先を設定するためのa要素が最後にあることに注目

ここで、リンク領域をどのようにして全体に設定するかの仕組みを解説しよう。今回のマークアップでは、通常どおり表示すると【3-1】のような状態になる。ここでポイントとなるのが、先ほどの「More...」のa要素だ。このa要素をボックス全体に広げることでリンク領域で覆い隠し、全体をリンク領域にする。


【3-1】ボックス全体に「More...」のa要素を広げて内容を覆い隠すことで全体リンクを実現する

CSSを記述していこう。まずは【4-1】のCSSを記述し、「More...」のリンクが表示される通常の状態にする。なお、今回のテクニックはIE6が対象外となってしまうが、IE6で表示した場合でも【4-2】の状態になるようにするので、アクセシビリ ティには問題が生じない。

続いて、IE6 以外のブラウザに適用するためハックを利用したCSS を追記する。先ほどのコードに続いて【4-3】のコードを記述しよう。まず、全体を覆っているdiv 要素に「position:relative」を設定しておく。さらに、「More...」のa要素をブロック要素に変換し、さらに「position:absolute」を指定して絶対配 置にする。これでa要素はdiv要素を基準とする絶対配置ができるので、a要素の座標を「left:0」「top:0」としてdiv要素の左上に揃えておく【4-4】。


【4-1】


【4-2】現時点ではこのように表示される。今回対象外のIE6は全体リンクにはならないが、最終的にこの状態になるためアクセシビリティの妨げにはならない


【4-3】CSSハックでIE6以外のブラウザにスタイルを適用する


【4-4】a要素が絶対配置になり、全体のdiv要素左上に揃っている

さらに、a要素に「width:100%」「height:100%」を指定して、親ボックスであるdiv要素全体にサイズを広げる【5-1】。ただし、このままでは「More...」のテキストが 残ってしまっているため、a要素に「textindent:-999px」を指定してテキストをエリア外へ移動させている【5-2】。なお、IE7と8は、a要素に背景色が指定されていないと画像やテキストの部分がクリッカブルでなくなるため、CSSハックを使って背景色を指定した上で、フィルターを使って不透明度を0に設定している（【4-3】11、12行目）。


【5-1】a要素の幅と高さを全体へ広げる。要素の重なり順は、特に指定しない限り後に記述した方が上になるため、これでdiv要素全体がa要素で覆われたことになる


【5-2】a要素の内容を「text-indent:-999px」で画面外へ飛ばす。これで「More...」の文字を消すことが可能だ

あとは【6-1】のCSSを追記して、全体のdiv要素に「:hover」疑似クラスでマウスオーバー時のスタイルを設定すれば完成だ【6-2】 。


【6-1】マウスオーバー時のスタイルを設定


【6-2】