About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

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

【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疑似要素でクリック可能範囲を広げています!

    コンテンツ一覧へ戻る

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

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

    サンプルを確認する

    コメントする

    トップへ戻る