今回はCSSでリンク(aタグ)のクリック範囲を親要素全体に広げる方法を紹介します。
PCサイトはもちろん、スマホサイトでは特にリンクの範囲が広い方がユーザーとしては使いやすくなります。意外と使う機会が多いテクニックではないでしょうか。
リンクを親要素全体に広げる方法
HTMLとCSSだけで簡単に実装できます。
HTML
<div class="hoge">
コンテンツ
<a href="test.html"></a>
</div>
CSS
.hoge {
position: relative;
}
.hoge a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
コードは超シンプルです。
ポイントは親要素に[position:relative]、子要素に[position:absolute]を指定すること。親要素の左上から幅・高さ100%のaタグレイヤーを重ねるイメージですかね。
親要素はdivでなくてもOK。liなどのブロック要素であれば同じ動きになります。
Related Posts