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

以上です。

効率よくスキルを身に付けたい方向け

「スキルは習得したいけど、プログラミングスクールを使うか迷っている」という方は

無料相談を実施しているスクールに相談してみるのがオススメです。

ビジネス現場で活躍できるWebスキル（デザイン、マーケティング、プログラミングなど）が身に着けられる「インターネット・アカデミー」では現在無料相談受付中です。

1995年に開校した日本初のIT専門スクールで、３万人以上の卒業生が活躍しています。

今なら国の制度をつかって最大５６万円の給付を受けて受講することも可能です。

正直スキルの習得にはスクールに通うのが最短ルートですが、

お金もかかる話なので、まずは０円で話を聞いて考えてみるのもアリです。

インターネット・アカデミー