html div要素全体にリンクをつける方法

div要素全体にリンクをつけたい時の方法メモ
自分用に簡潔にまとめる。

<!-- divにclass要素を付与する-->
<div class="linkbox">
  <p>sample 文章なり画像なり</p>
  <a href="https://www.google.co.jp"></a>
  <p>sample 文章なり画像なり</p>
</div>

/*div要素全体にリンクをつけるために必要な要素*/
.linkbox {
    position: relative;
}
.linkbox a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

/* 以下見た目をわかりやすくするための設定*/
.linkbox {
    border: solid 2px `#000000;`
}
.linkbox a:hover{/* マウスオーバー時に色変更*/
    opacity: 0.1;
    background-color: `#000000;`
}

See the Pen div要素全体にリンクをつける方法 by iwato (@iwato) on CodePen.