【CSS】クリック可能範囲を広げるスタイルシートテクニック

コリスさんで以前紹介されており、ずーっと気になっていてようやく実際に自分でも試すことができました。。汗

コリスさんの記事はこちら！
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

とりあえずサンプルを見たい方はこちらから！

サンプルを確認する

概要

で、どういう事かと言いますと…カード内のボタンがaタグなんだけどクリック可能範囲はカード全体にしたい！
といった場合に使えるスタイルシートのテクニックになります。

カード全体をaタグで囲むというのももちろんあるのですが、今回はあくまでボタン部分にaタグというマークアップで、カード全体をクリック可能範囲にできるようCSSを適用するという手法です。

とりあえずサンプルを見たい方はこちらから！

サンプルを確認する

コンテンツ一覧へ戻る

HTML

<div class="cards">
  <div class="card">
    <div class="card__thumb">
      <img src="/sample/images/css008/yakiniku.jpg" alt="">
    </div>
    <h3 class="card__heading">
      焼き肉
    </h3>
    <p class="card__text">
      焼き肉ってなんでこんなにも美味しいのだろうか。
    </p>
    <a href="" class="card__link">
      美味しい理由
    </a>
  </div>
  ...
</div>

コンテンツ一覧へ戻る

CSS

.card {
  position: relative;
}
.card__link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: transparent;
}

カード自体はposition: relative;にしておき、aタグのafter疑似要素でクリック可能範囲を広げています！

コンテンツ一覧へ戻る

実際に使える場面は結構多いのかなと思う、スタイルシートのテクニックでした！

サンプルはこちらからご確認ください！

サンプルを確認する