quartet-communications.com | Nov 30th -0001
【HTML】出来るだけ押しやすいチェックボックスを作る
HTMLで普通にチェックボックスを作ると、こんなふうになると思います。
チェックしてください
チェックしてください
しかしこれだと、チェックボックスの小さな□の部分だけしかクリックできなくて、非常に押しづらいです。そこで、チェックボックスを押しやすくするために、というタグを使います。
しかしまだもう一歩です。このままだと、チェックボックスと「チェックしてください」の間の隙間はクリックできません。 そこで、チェックボックスとテキストをセットで
こうすると、チェックボックスとテキストの間に隙間があっても、そこもラベルの領域に含まれるためクリッカブルになります。
さらにもう少しだけ気を配って、ラベルとチェックボックスのマウスカーソルをポインタ（指マーク）に変更しておきましょう。
CSS:
label, input[type='checkbox'] { cursor: pointer; } HTML:
こうしておくと、マウスポインタの形状が変わるので、どこからどこまでがクリッカブルかというのが直感的に分かります。この方がより親切ですね。
まとめ
いかがでしょうか。最初と最後のチェックボックスを並べてみると、
チェックしてください
ほんの少しの工夫で、かなり押しやすいチェックボックスになったのではないでしょうか。
こんな風に、技術的に難しいことをしなくても、ちょっとした気配りでUIを改善できることはよくあります。大切なのはユーザの視点に立って考えるということでしょう。「自分がユーザだったら、こんな風に作られていたら助かるのに」という気づきを自分のコードにどんどん反映していけるといいですね。
Original Page: http://quartet-communications.com/info/technology/7165
Shared from Pocket
Sent from my iPad
