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

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。

CSSだけで、クリック可能な範囲を広げるスタイルシートのテクニックを紹介します。
下記のようなa要素がボタンだけでも、クリック可能な範囲がカード全体に広がります。

a要素はブルーのボタンだけ、でも、クリック可能な範囲はカード全体に

Stretched link


クリック可能な範囲を広げるスタイルシート「.stretched-link」

デモのキャプチャ

カードのHTML

カードはBootstrapで実装されており、a要素はボタンのみになっています。ごく普通の実装です。

ポイントになるのはボタンに与えられた.stretched-linkです。このスタイルシートがクリック可能な範囲を広げます。

クリック可能な範囲を広げるCSS

クリック可能な範囲を広げるスタイルシートです。

.stretched-linkをa要素に加えると、::after擬似要素の包含ブロックがクリック可能になります。これは「position: relative;」を持つ要素に適用され、.stretched-linkを加えた要素とそれを含む親要素がクリック可能になります。
これで、カード全体がクリック可能になります。
※疑似要素でかぶせるため、テキスト要素を選択することはできなくなりますが、そもそもリンクさせたい要素に適用するので、問題ないでしょう。

実際の動作は、下記ページで確認できます。

See the Pen Stretched link by Martijn Cuppens (@MartijnCuppens) on CodePen.

リンクの適用範囲を限定させる場合

親要素が「position: relative;」ではない場合は、リンクが親要素より外側に拡大しないように、.position-relativeを用意しておきます。

デモのキャプチャ

カラムに適用する場合

カラムはデフォルトで「position: relative;」なので、リンクを横並びに広げたい場合は、カラムに.position-staticを加え、全体の親要素に.position-relativeを加えます。

デモのキャプチャ

複数のリンクがある場合

「.stretched-link」を適用した要素に複数のリンクを含めることもできます。その場合には、z-indexを使用します。

デモのキャプチャ

「.stretched-link」が機能しない場合の原因

「.stretched-link」が機能していないように見えている場合は、下記の原因である可能性があります。

  • positionの値が、static以外の場合。
  • transformやperspectiveの値が、none以外の場合。
  • wtransformやperspectiveの値が、will-changeの場合。
  • filterの値が、noneあるいはwill-change以外の場合。
デモのキャプチャ

sponsors

top of page

©2018 coliss