• コーディング ファクトリーHOME
  • Coding Methodology
  • 第49回 スマートフォンサイトのチェックボックス(ラジオボタン)のタップ可能領域を広げる

コーディングメソドロジー

第49回 スマートフォンサイトのチェックボックス(ラジオボタン)のタップ可能領域を広げる

スマートフォン(以下、スマホ)ユーザーが増えてきて、弊社でもスマホサイトを制作する機会が多くなってきました。今回は、少しでも快適にスマホサイトを閲覧できるようにする為のjavascriptをご紹介します。

スマートフォンサイトのチェックボックス(ラジオボタン)

iPhoneのmobile safariではlabelタグが無効に

スマホのブラウザはCSS3に対応しているので、ドロップシャドウのあるサイト等、色々なデザインのサイトを作りやすくなりましたが、iPhone・Androidそれぞれスマホならではの不具合が多く残っているのが現状です。

お問い合わせフォームのページ等でよくチェックボックスやラジオボタンを利用することがあると思いますが、チェックボックスやラジオボタンを囲む際に使用するlabelタグはiPhoneでlabelタグを押しても反応しないという不具合があります。(この問題は、iOS6のmobile safariでは解消済み)01のようなチェックボックスのリストを作成した場合、本来だとlabelタグで囲っているテキストをタップしてもチェックボックスにチェックが入りますが、iPhoneだとlabelタグの不具合でタップ領域が狭く、使い勝手が悪いです(02参照)。

labelタグを機能させたい場合、03もしくは04のような記述をすると、labelタグで囲ったテキストもタップできるようになります。(0304の記述方法は、どちらも同じ意味合いなので、どちらか一方で機能します。)
これでiPhoneでも少しタップ領域が増えました。

もっとタップ領域を広げたい

サイトのデザインにもよりますが、02のようなチェックボックスのリストを制作して「グレーのボーダー内全体をタップ領域にしたい」という場合、05のjavascriptの記述でチェックボックスのタップ領域がより広くなります。
これをラジオボタンにも適応させる場合は、javascriptの記述が少し変わり、06のようになります。

スマートフォンサイトのチェックボックス(ラジオボタン)

0506の記述をすることでボーダーを形成しているliタグがタップ領域となるため、タップ領域を広げるために記述していたlabelタグや、チェックボックスのid、ラジオボタンのidの記述が不要になり、HTMLソース自体もスッキリします。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム