どうも7noteです。js不使用。CSSだけでリンクの範囲を広げる方法。
先日の記事でjQueryもしくはHTML5を使ってaタグのリンクの範囲を広げる方法を書きましたが、CSSだけでaタグのリンクを広げる方法もあるので、今回記事にまとめました。
正直この方法を初めて知った時は驚きました・・・
書き方
index.html
<divclass="linkarea"><p>ここに文章が入ります</p><ahref="https://www.google.com/"></a></div>style.css
.linkarea{width:200px;/* ただの装飾 */background:#AFF;/* ただの装飾 */position:relative;/* リンクの基準位置とする */}.linkareaa{width:100%;/* 幅を親要素めいいっぱいにする */height:100%;/* 高を親要素めいいっぱいにする */display:block;/* 幅と高さを持たせるためブロック要素にする */position:absolute;/* 絶対位置にする */top:0;/* 上寄せ */left:0;/* 左寄せ */}結果
解説
aタグの中は空っぽにしています。空にして、親要素(.linkarea)と同じ大きさにしたのち、position:absolute;で親要素の上に重ねることで、見えないaタグがクリックされてリンクする仕組みになっています。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ