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

0

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

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

困ったこと

テキストで説明しても分かりづらいと思うので、実例を交えて紹介。

コードをシンプルにするために装飾は最小限にしています。

See the Pen GdWXpE by code-school (@code-school) on CodePen.

ボックスにマウスを乗せた時点でリンクが効くようにしたいのですが、テキストの箇所にマウスが乗らないと反応してくれませんね。

解決するために行うこと

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

先にコードを見てみましょう。

See the Pen rvyZME by code-school (@code-school) on CodePen.

ブロックにマウスのポインタを乗せるとリンクの幅がボックス全体に広がっているのが分かると思います。

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

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

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

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

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

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

 

まとめ

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

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

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








 

About Author

Comments are closed.