HTML - DIV要素全体にリンクをかける方法

2019-03-09 21:25:55 3928

はじめに

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にしておくこと。

関連記事