HTML の label タグに必ずつけたい CSS

CSS に1行加えるだけで
ラベルまわりがとってもわかりやすくなる。

「そんなん当たり前」という人もいるかもしれないけど
Gmail やら Twitter やらのログイン画面を見たら
実装されてなかったので一応。

label というのはフォームの部品とセットで使うやつで、
ある部品とその項目名を結びつけるやつね。

↓このようなチェックボックスがあるとき

次回から自動的にログイン

↓こんなふうにラベルを指定しておくと

<input type="checkbox" id="rememberme">
<label for="rememberme">次回から自動的にログイン</label>

テキスト部分とチェックボックスが関連づけられるので
テキストをクリックした時も
チェックボックスにチェックが入るようになりますね。

ここをクリックでチェック入れられるよ

小さいチェックボックスにマウスカーソルをあわせなくても
ラベル部分をクリックすればいいから楽ちん。

なんだけど、
これが指定されているかどうかは見た目では判断できないし
そもそもあんまりネットを使わないユーザーには
そんな機能があることすらわからないかもしれない。

なので、少しでもこれをわかりやすくするために
label にはスタイルシートでこれを指定するようにしたい。

label {
  cursor: pointer;
}

こうしておくと、大抵のブラウザでは
ラベル部分にマウスカーソルを重ねたとき
カーソルの形が「ここクリックできますよ」という形に変わるので
とってもわかりやすいですね。

ここにカーソルを重ねるとポンターが変形するよ

なんでタイトルが「必ずつけるようにしている」じゃなくて
「必ずつけたい」なのかというと、
今まで自分が作ったサイトの中に
実装できてないものがある気がするから。

主題と関係ないけど、
「○○したい」って便利かつズルい表現だと思う。

乱用は避けたいものですね。