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

この記事にはPRが含まれます

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

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

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

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

よくある方法だと要素全体を<a>と</a>で囲んでしまう方法がありますが、

HTMLの構造を後から変えたくない、といった状況もありますよね。

今回はHTMLタグの構造を変えずにリンク化する方法をご紹介します。

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

完成サンプル

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%;

以上です。