Webデザイン |
Lesson 8 | ブロック要素の全体を リンク領域に設定する |
制作・文 | 高橋としゆき(Graphic Arts Unit) | |||
> | To Use | CSS | ||
> | Browser | IE 7over | Firefox 3over | Safari 5over |
a要素によるリンクはテキストか画像単体に設定するのが通常だが、複数の要素が入ったブロック要素全体をリンク領域に設定することもできる。さらにマウスオーバーで背景色を変更して、ユーザビリティに配慮した作りにする。 |
01
【1-1】通常
【1-2】マウスオーバー時
02
【2-1】画像はdiv要素、テキストはdl要素でマークアップした。リンク先を設定するためのa要素が最後にあることに注目
03
【3-1】ボックス全体に「More...」のa要素を広げて内容を覆い隠すことで全体リンクを実現する
04
続いて、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要素左上に揃っている
05
【5-1】a要素の幅と高さを全体へ広げる。要素の重なり順は、特に指定しない限り後に記述した方が上になるため、これでdiv要素全体がa要素で覆われたことになる
【5-2】a要素の内容を「text-indent:-999px」で画面外へ飛ばす。これで「More...」の文字を消すことが可能だ
06
【6-1】マウスオーバー時のスタイルを設定
【6-2】