今回は、checkbox labelの作り方についての紹介です。
簡潔にご紹介していくので、サクッと答えを求めている方は参考にしてください！
checkbox labelの作り方
HTMLで普通にチェックボックスを作ると、こんなふうになると思います。
<input type="checkbox" />チェックしてください
チェックしてください
しかしこれだと、チェックボックスの小さな□の部分だけしかクリックできなくて、非常に押しづらいです。そこで、チェックボックスを押しやすくするために、<label>というタグを使います。
<input type="checkbox" id="sample_checkbox" /> <label for="sample_checkbox">チェックしてください</label>
<label>タグを使って「チェックしてください」というテキストをチェックボックスのラベルにしたので、テキストの部分もクリッカブルになっています。これで随分押しやすくなりましたね。
しかしまだもう一歩です。このままだと、チェックボックスと「チェックしてください」の間の隙間はクリックできません。 そこで、チェックボックスとテキストをセットで<label>タグの中に入れてしまいましょう。
<label for="sample_checkbox"> <input type="checkbox" id="sample_checkbox" />チェックしてください </label>
こうすると、チェックボックスとテキストの間に隙間があっても、そこもラベルの領域に含まれるためクリッカブルになります。
さらにもう少しだけ気を配って、ラベルとチェックボックスのマウスカーソルをポインタ（指マーク）に変更しておきましょう。
CSS:
label, input[type='checkbox'] {
cursor: pointer;
}
HTML:
<label for="sample_checkbox"> <input type="checkbox" id="sample_checkbox" />チェックしてください </label>
こうしておくと、マウスポインタの形状が変わるので、どこからどこまでがクリッカブルかというのが直感的に分かります。この方がより親切ですね。
まとめ
いかがでしょうか。最初と最後のチェックボックスを並べてみると、
チェックしてください
ほんの少しの工夫で、かなり押しやすいチェックボックスになったのではないでしょうか。
こんな風に、技術的に難しいことをしなくても、ちょっとした気配りでUIを改善できることはよくあります。大切なのはユーザの視点に立って考えるということでしょう。「自分がユーザだったら、こんな風に作られていたら助かるのに」という気づきを自分のコードにどんどん反映していけるといいですね。
