ラベル要素とは
みなさまは「ラベル要素」はご存じでしょうか。少しWEB制作をかじったことのある人なら、もうおわかりですね。
普段私たちがウェブフォーム等でで目にするラジオボタンやチェックボックスの右横についているあのテキスト。それをWEBの世界では「ラベル」と読んでいます。
そしてラベルとラジオボタンやチェックボックス等のコンポーネントを関連付けるために生まれたHTMLの要素が「ラベル（label）要素」です。
以前の記事クリック領域を広げよう！フォームの使いやすさを劇的にアップする、たった３つの工夫でもラベル要素についてはお伝えしていますが、本日はあらためてその必要性や効果的なデザインカスタマイズ方法についてご紹介できればと思います。
ラベル要素がなぜ重要か
チェックボックスやラジオボタンは、選択するためには小さなコンポーネントをクリックしなくてはならず、ユーザーに大きなストレスを与えてしまいます。
そこでラベル要素を使うと、ラベルの文言をクリックすることでラジオボタンやチェックボックスが反応するようになります。
つまり、ラベル部分もクリックができるようになる＝クリック領域が広がります。
こうして色を付けてみると一目瞭然ですよね。
このように、ラジオボタンとチェックボックスではラベル要素の利用は必須の対応といえます。
ただし！labelを導入するだけは終わらない!?さらに使いやすくする方法をご紹介します
labelは設定済みです、と安心しているみなさま、まだまだフォームを使いやすくするためにできることがあるかもしれません。
本日は下記のオーソドックスなラジオボタン（label設定済み）のデモを実際に変化させながら、labelのカスタマイズ方法を紹介していきたいと思います。
いずれもスタイルシート（CSS）の変更のみで、すぐに実現できる方法を紹介しています。
デモ：ラベル要素を用いただけの簡素なラジオボタン
目次
labelをブロックレベル要素に変えて、クリック領域をアップ
簡単にいえば、ラベルの有効範囲を横幅いっぱいまで広げることです。
クリック領域がその分広がりますね。
ただし、余白が多すぎるところで実施すると、意図しない入力を引き起こす場合がありますので注が必要です。その場合はボックスの横幅を制御すると良いでしょう。
デモ：ラベル要素の領域を横幅いっぱいに広げる
ラベル右側の余白でも選択できることがおわかりいただけるでしょうか。
内側の余白をじゅうぶんに
選択肢同士が詰まっていると、当然入力しにくいですし、余白を開けることは大切。
さらに文字部分だけではなく、文字のまわりの領域もいくらかクリック領域としておくことで、さらに選択しやすくなります。
デモ：文字の周辺もクリックが可能に
少し文字の上下をはみでたとしてもクリックができます。
カーソルを当てた際に、マウスカーソルを変化させよう
ラベル要素にマウスをあてると、（ブラウザにも依存しますが）ラジオボタンやチェックボックスの色が変化するために、クリック可能ということが感じられると思います。
がしかし、この微妙な変化だけではクリックできることに気づかないユーザもいるかもしれません。
そこでおすすめなのがマウスオーバーの表現を取り入れること。
とくにマウスをあてた際に、カーソルをポインタ表示にすれば、クリックできることが一目瞭然です！
動作デモ：マウスオーバーでポインタ表示
カーソルがデフォルトの矢印マークから指マークに変化しています。
マウスオーバー表現を付けるとさらに使い勝手アップ
さらにカーソルだけでなく、さまざななマウスオーバーの表現を採り入れる工夫をしてみましょう。
ただし、装飾のしすぎがかえって使い勝手を落とす場合もありますので、さりげない変化程度に留めるのが吉です。
例えば、薄く背景色を付けたり、ラベルを太字にしたりするくらいの変化であれば効果的なのではないでしょうか。
（唐突感が出ないようには注意したいですね。）
動作デモ：マウスオーバーで背景色
動作デモ：マウスオーバーで太字
まとめ
いかがだったでしょうか。
本日は、ラジオボタンやチェックボックスに「label要素」を設定することの重要性や、さらにフォームを使いやすくするためのカスタマイズ方法についてお伝えしました。
before／afterはこのようになりました。
before（labelなし）
ラジオボタン
after
以上を参考に、使いやすいラジオボタン、チェックボックスに改善を進めていただければ幸いです。
