【CSS】リンク(aタグ)のクリック範囲を親要素全体(div)に広げる方法

リンク(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などのブロック要素であれば同じ動きになります。

こんな記事も読まれてます

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント