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

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

Contents

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

aタグのリンク範囲をボックス要素全体に設定するボックス要素とaタグのCSS記述

※.box1のボックス要素は「テキストのみにリンクを設定」、.box2のボックス要素は「ボックス要素全体にリンクを設定」となります。
　.box2 aに「display: block;」を設定することで.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>

aタグのリンク範囲をボックス要素全体に設定するボックス要素とaタグのHTML記述

※class=”box1″（テキストのみにリンクを設定）とclass=”box2″（ボックス要素全体にリンクを設定）となります。

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


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

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