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

以上です。

さいごに

Web制作者やフロントエンドエンジニアを目指すなら、こちらの書籍がオススメです。

1冊ですべて身につくJavaScript入門講座

こちらはWebクリエイターボックスのManaさんが書かれた書籍で、ポイントは以下のような感じです。

・JavaScriptの基本から実装まで必要なことがすべて学べる
・図解が充実していて読みやすい
・章立てや構成がよくできていてスムーズに読み進められる
・アニメーションやイベントの知識と技術がつまっている
・サンプルプログラムがWeb上からダウンロードできる(自分でコードを用意しなくて良い)

タイトルどおり、一冊でまるっと学べる書籍になっているので、初学者必携の一冊といってもいいでしょう。

それでは快適なWebライフを~

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次