これは疑似要素の便利な使い方！ レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック

ボタンやアイコンなどでクリック・タップ可能なエリアを広げたいと思ったことがあると思います。a要素をブロックにしてpaddingを加えたり、JavaScriptを使用したりといった方法がありますが、今回はレイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニックを紹介します。 下記は、左は通常のクリックエリア、右はクリックエリアを広げたものです。デスクトップ時は小さいままで、スマホ時には44pxに広げるといったことも簡単にできます。 実際の動作は、下記でもページでご覧ください。左は通常のクリックエリア、右はクリックエリアを広げたものです。 「デバッグモード」をクリックすると、拡大されたクリックエリアが表示されます。 See the Pen ::after content to increase clickable area by coliss (@coliss) on

[coliss]

レイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニック

[shige-u]

レイアウトを変えずにクリックエリアだけを広げたいシーンってなんだろ？他の要素に被ってしまいそう。そうでなければpaddingで良いよね。

[w_bonbon]

優秀なデザイナーはfigmaやsvgなどにクリック領域考慮の不可視のRectを含めてくれるのでデザイナーさん居りましたら覚えておいて欲しいです〜

[kijtra]

前も同じような記事書いてたよね。 https://coliss.com/articles/build-websites/operation/css/stretched-link-clickable.html

[Falky]

似たようなこと、たぶん15年くらい度々やってる。いやもっとか？古くはProxomitronで、今はusercssで。使いづらいサイトがあるとすぐ自分で改造する性格なので…。擬似要素で後付けできることはいろいろあるのだ

[monacal]

アイコンが画像でなくフォントアイコンや文字で、背景の角丸グレーはCSSだとpaddingはそっちに使うことも。擬似要素を使えば無駄なDOMを増やさずクリッカブルエリアを拡げられて便利

[kvx]

アクセシビリティやってる時は定番の処理

[Knoa]

クリッカブル要素そのものに padding:10px; margin:-10px; で済むよ

[tofu-kun]

よく考えるものだ