CSS

aタグのリンク範囲をボックス要素全体に設定する方法

aタグでテキストにリンクを貼ることは多くあると思いますが、テキストだけでなくテキストがあるボックス(親要素)までリンクを貼りたいこともあります。
今回はaタグのリンク範囲をボックス要素全体に設定する方法をご紹介します。

ボックス要素とaタグのCSS記述

box1のボックス要素は「テキストのみにリンクを設定」、box2のボックス要素は「ボックス要素全体にリンクを設定」となります。

<style>
body{
  padding: 0;
  margin: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:15px 0;
  font-size: 18px;
}
.box1{
  width: 300px;
  height: 300px;
  background-color: #CCCCCC;
  margin: 0 auto 30px auto;
}
.box1 a{
  text-align: center;
  line-height: 300px;
  color: #000000;
  text-decoration: none;
}
.box2{
  width: 300px;
  height: 300px;
  background-color: #007FFF;
  margin: 0 auto;
}
.box2 a{
  text-align: center;
  line-height: 300px;
  color: #ffffff;
  text-decoration: none;
  display: block;
}
.box1 a:hover,
.box2 a:hover{
  text-decoration: underline;
}
</style>

※.box2 aに「display: block;」を設定することで.box2ボックス要素全体にリンクを設定できます。

ボックス要素とaタグのHTML記述

box1(テキストのみにリンクを設定)とbox2(ボックス要素全体にリンクを設定)となります。

<h1>ボックス要素内の「テキストのみにリンク設定」と「ボックス要素全体にリンクを設定」してます</h1>


<div class="box1"><a href="/" target="_blank">テキストのみにリンクを設定</a></div>

<div class="box2"><a href="/" target="_blank">ボックス要素全体にリンクを設定</a></div>

aタグのリンク範囲をボックス要素全体に設定するデモページ

aタグのリンク範囲をボックス要素全体に設定するデモ

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。