どうも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;            /* 左寄せ */
}

結果