どうも7noteです。js不使用。CSSだけでリンクの範囲を広げる方法。
先日の記事でjQueryもしくはHTML5を使ってaタグのリンクの範囲を広げる方法を書きましたが、CSSだけでaタグのリンクを広げる方法もあるので、今回記事にまとめました。
正直この方法を初めて知った時は驚きました・・・
書き方
index.html
<div class="linkarea">
<p>ここに文章が入ります</p>
<a href="https://www.google.com/"></a>
</div>
style.css
.linkarea{
width: 200px; /* ただの装飾 */
background: #AFF; /* ただの装飾 */
position: relative; /* リンクの基準位置とする */
}
.linkarea a{
width: 100%; /* 幅を親要素めいいっぱいにする */
height: 100%; /* 高を親要素めいいっぱいにする */
display: block; /* 幅と高さを持たせるためブロック要素にする */
position: absolute; /* 絶対位置にする */
top: 0; /* 上寄せ */
left: 0; /* 左寄せ */
}
結果
![movie.gif](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2Fcdaceb86-555c-748d-2a1c-21d6db921c7e.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b44279a5c4e5dc06b08a8f5cbe6c2f15)
解説
aタグの中は空っぽにしています。空にして、親要素(.linkarea)と同じ大きさにしたのち、position:absolute;
で親要素の上に重ねることで、見えないaタグがクリックされてリンクする仕組みになっています。