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

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

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

Stretched link

• クリック可能な範囲を広げるスタイルシート「.stretched-link」
• リンクの適用範囲を限定させる場合
• カラムに適用する場合
• 複数のリンクがある場合
• 「.stretched-link」が機能しない場合の原因

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

カードのHTML

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

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

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

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

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

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

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

親要素が「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以外の場合。