webサイトを作っているときに、最初はテキスト部分だけがリンクとして機能するように作ってたが、途中でボックス全体をクリックできるようにしたくなったという時ありませんか？
デザインや仕様をしっかり組んでから作るから「そんなことねーよ！」と思う方もいるかもしれませんが、インブラウザデザイン（直接コードを書いてデザインを進める方法）で進めている場合は、上記のようなことが起こるかもしれません。
ということで今回は「aタグのクリックできる領域を親要素いっぱいに広げる方法」をご紹介いたします。
aタグ の領域を広げる
aタグ の領域を広げるのにpositionプロパティを使っていきます。
ではコードを見ていきましょう。
HTML
今回は「box」と言う名前のdiv要素が親要素になります。
このboxいっぱいにリンクを広げていくため、aタグはboxの子要素となるように配置します。
CSS
親要素のboxクラスにposition:relative。リンクとなるaタグにposition:absoluteを指定します。
aタグ が親要素に重なるようにtop/leftを0にし、全体を覆うために幅・高さを100%にします。
完成
これでaタグが親要素いっぱいになっていると思います。
実際に上記コードを利用したサンプルを作ってみたので、ぜひ確認してみてください。
