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

この記事の前提条件

対象: HTML・CSS
難易度: ★☆☆
所要時間: 約5分

Webサイトを作っているとき、最初はテキスト部分だけがリンクとして機能するように作っていたのに、途中でボックス全体をクリックできるようにしたくなった、という経験はないでしょうか。

デザインや仕様をしっかり固めてから作れば起きにくいことですが、インブラウザデザイン(コードを直接書きながらデザインを進める方法)で進めている場合には、こういった手戻りが起きやすいものです。今回は、aタグのクリックできる領域を親要素いっぱいに広げる方法をご紹介します。

目次非表示

aタグの領域を広げる
- HTML
- CSS
完成
まとめ

目次へ

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タグが親要素いっぱいに広がっているはずです。実際に上記のコードを使ったサンプルを用意したので、ぜひ確認してみてください。

💡 実務での注意点

box要素の中にボタンなど、別のクリック要素を配置したい場合は要注意です。aタグが上に重なった状態だと、そちらのクリックを拾えなくなってしまいます。その場合は、ボタン側のz-indexをaタグより大きくするか、position: relative;を指定して重なり順を調整する必要があります。