ボタンやアイコンやナビゲーションなど、クリック・タップ可能な領域のサイズを広くする実装方法のまとめ

ボタンやアイコン、ナビゲーション、サイドバーなど、さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張する実装方法を紹介します。 Enhancing The Clickable Area Size by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ユーザーエクスペリエンスの観点 ボタンのクリック可能な領域を拡張する リンクのクリック可能な領域を拡張する アイコンのクリック可能な領域を拡張する チェックボックスとラジオボタンのクリック可能な領域を拡張する サイドバーのクリック可能な領域を拡張する セクションヘッダのクリック可能な領域を拡張する 疑似要素を使用してクリック可能な領域を拡張する 終わりに はじめに 例えば、ボタンやリンクなどの要素をクリック・タップしようとした時に

[coliss]

さまざまなUI要素に適したクリック・タップ可能な領域のサイズを拡張するスタイルシートのテクニック。

[Knoa]

アイコンなどには {padding: 5px; margin: -5px} のようにパディング追加してネガティブマージンで相殺する方法もある。レイアウトに影響を与えないし、お手軽やぞ。