aタグを要素全体にカバーさせる方法

こんにちはtakosanです。

今回はaタグ、つまりリンクを要素全体に適用させる方法をご紹介します。

aタグを要素全体にカバーさせる方法

普通のaタグだけだと「リンクはこちら」のような文字をリンクにすることしかできません。

しかし最近ではボタンや画像、一定の要素を余白込みでリンクにしたいなどということもありますよね。

一般的な方法だと要素全体を<a>と</a>で囲んでしまう方法がありますが、そんなことしなくても別の方法で対応させることができます。

それでは早速見ていきましょう。

完成サンプル

See the Pen Wrapping a tag by yukiwebcreate (@Yukiwebcreate) on CodePen.

HTML

<div class="box">
  <div class="content">
    <p>この先要素全体を</p>
    <p>ホバー時にリンクさせたい</p>
    <a href="#"></a>
  </div>
</div>

もはや説明の必要もないくらいシンプル…ですが、一応説明しておくと

今回のメインでもあるaタグは親要素であるcontentの子要素になっています。

—-

CSS(主要部分のみ)

.content{
  background:#ffffbc;
  position:relative;
  padding:10px;
  transition:all .2s;
}
.content a{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

CSSを上記のように書くだけで要素全体をリンクにできます。

ポイント

aタグの親要素contentに

position:relative;

を設定し、

aタグには

position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;

を設定します。以上です。

これでaタグはcontentの幅と高さ100%に広がりますので、要素全体をリンクにすることができます。

非常によく使う手法になるので覚えておきましょう。

まとめ

親要素に

position:relative;

子要素(aタグ)に

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

以上です。