aタグのリンク範囲をボックスいっぱいに広げる方法

リンクのaタグをボックスいっぱいに広げる方法を紹介します。

divで囲んでボックス内にリンクテキストを配置したけど、リンクの範囲がボックスにいっぱいに広がらない！とお困りの人は参考にしてみてください。

困ったこと

ボタンにリンクを設置したのですが、ホバーしてもテキストの上だけしかリンク範囲がありません。

これをボタンいっぱいに広げたいと考えています。

解決するために行うこと

boxをaタグで囲む？　と考えてしまうところですが、それCSSで全て解決します。

まず、box側のCSSでposition: relativeにします。

次にリンク側でposition:absoluteにし、display:blockでブロック要素化します。

そもそも、aタグはインライン要素なのでリンク範囲をボックスいっぱいに拡張できなかったわけですね。

そして、topとleftで0を指定することでボックスの1番左上からぴったりとaタグの要素がくっつく状態になります。

ちょうど、box要素いっぱいにaタグ要素が広がるとイメージしてみてください。

あとは、widthとheightでそれぞれ100%を指定して要素の大きさをいっぱいまで広げればOKです。

まとめ

いかがでしたでしょうか。

今回、aタグのリンク範囲をボックスいっぱいに広げる方法を紹介しました。

親要素と子要素にそれぞれ長ったらしいコードを書かないといけないので面倒ですが、今の所リンクの範囲を全部に広げる方法はこれが定番なので、原理を覚えてそのまま覚えてしまっても良いと思います。