はじめに
aタグはインライン要素なので、基本的にブロック要素であるdivを囲むことをしてはいけません。記法のルールに外れることになります。では、どのようにしたらdiv全体にリンクをかけられるのか?
結論
html
<div class="box">
<a href="">テストリンク</a><br />
テストテキスト<br />
テストテキスト
</div>
css
.box a{
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
}
解説
aタグをブロック要素に変換し、div要素全体を、覆うようにポジションを指定する。そのため、外枠のdivはposition:relativeにしておくこと。