よく考えるものだ
レイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニック
レイアウトを変えずにクリックエリアだけを広げたいシーンってなんだろ？他の要素に被ってしまいそう。そうでなければpaddingで良いよね。
クリッカブル要素そのものに padding:10px; margin:-10px; で済むよ
優秀なデザイナーはfigmaやsvgなどにクリック領域考慮の不可視のRectを含めてくれるのでデザイナーさん居りましたら覚えておいて欲しいです〜
アクセシビリティやってる時は定番の処理
アイコンが画像でなくフォントアイコンや文字で、背景の角丸グレーはCSSだとpaddingはそっちに使うことも。擬似要素を使えば無駄なDOMを増やさずクリッカブルエリアを拡げられて便利
似たようなこと、たぶん15年くらい度々やってる。いやもっとか？古くはProxomitronで、今はusercssで。使いづらいサイトがあるとすぐ自分で改造する性格なので…。擬似要素で後付けできることはいろいろあるのだ
前も同じような記事書いてたよね。 https://coliss.com/articles/build-websites/operation/css/stretched-link-clickable.html
これは疑似要素の便利な使い方！ レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック
よく考えるものだ
レイアウトはそのまま変えずにクリック・タップ可能な領域を広げるCSSのテクニック
レイアウトを変えずにクリックエリアだけを広げたいシーンってなんだろ？他の要素に被ってしまいそう。そうでなければpaddingで良いよね。
クリッカブル要素そのものに padding:10px; margin:-10px; で済むよ
優秀なデザイナーはfigmaやsvgなどにクリック領域考慮の不可視のRectを含めてくれるのでデザイナーさん居りましたら覚えておいて欲しいです〜
アクセシビリティやってる時は定番の処理
アイコンが画像でなくフォントアイコンや文字で、背景の角丸グレーはCSSだとpaddingはそっちに使うことも。擬似要素を使えば無駄なDOMを増やさずクリッカブルエリアを拡げられて便利
似たようなこと、たぶん15年くらい度々やってる。いやもっとか？古くはProxomitronで、今はusercssで。使いづらいサイトがあるとすぐ自分で改造する性格なので…。擬似要素で後付けできることはいろいろあるのだ
前も同じような記事書いてたよね。 https://coliss.com/articles/build-websites/operation/css/stretched-link-clickable.html