エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
スマホ(Android,iphone)でタップしやすいラジオボタン【CSS】
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
スマホ(Android,iphone)でタップしやすいラジオボタン【CSS】
デフォルトのラジオボタンはタップしづらく、スマートフォンユーザーの操作性を大きく損なう可能性があ... デフォルトのラジオボタンはタップしづらく、スマートフォンユーザーの操作性を大きく損なう可能性があります。 labelタグを使用しても、タップ範囲はボタンと文字列だけなので、ユーザビリティが大きく改善するのか、といわれると微妙と言わざるを得ません。 JavaScriptを使用せず、CSSだけでスマートフォンからもタップしやすいボタンの実装方法を忘備録も兼ねて書いていきたいと思います。 レスポンシブにも対応しています。 完成したタップ領域の広いラジオボタン ラジオボタンの完成系(デモ)は下記になります。かなりシンプルにCSSを作っているため、軽量で拡張性が高いと思います。 お好きにカスタマイズしてみてください:) ラジオボタンを透明に 順を追って解説していますが、手っ取り早くスタイルシートをコピペで使いたい人は 完成までジャンプして下さい。 ラジオボタンを透明に チェックされたラベルの色を変更