【CSS】aタグのクリックできる領域を親要素いっぱいに広げる方法

webサイトを作っているときに、最初はテキスト部分だけがリンクとして機能するように作ってたが、途中でボックス全体をクリックできるようにしたくなったという時ありませんか?

デザインや仕様をしっかり組んでから作るから「そんなことねーよ!」と思う方もいるかもしれませんが、インブラウザデザイン(直接コードを書いてデザインを進める方法)で進めている場合は、上記のようなことが起こるかもしれません。

ということで今回は「aタグのクリックできる領域を親要素いっぱいに広げる方法」をご紹介いたします。

aタグ の領域を広げる

aタグ の領域を広げるのにpositionプロパティを使っていきます。

ではコードを見ていきましょう。

HTML

今回は「box」と言う名前のdiv要素が親要素になります。

このboxいっぱいにリンクを広げていくため、aタグはboxの子要素となるように配置します。

<div class="box">
<!-----ここに<p>やら<div>やら中身の要素------>
<a href=""></a>
</div>

CSS

親要素のboxクラスにposition:relative。リンクとなるaタグposition:absoluteを指定します。

aタグ が親要素に重なるようにtop/leftを0にし、全体を覆うために幅・高さを100%にします。

.box{
position: relative;
width:500px;
height:500px;
}
a{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:2 /* positionで指定しているようなレイアウトの場合指定したほうがいいかも */
}

完成

これでaタグが親要素いっぱいになっていると思います。

実際に上記コードを利用したサンプルを作ってみたので、ぜひ確認してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です