HTMLのlabelタグに必ずつけたいスタイル
2008年11月27日 11:45
CSS に1行加えるだけで
ラベルまわりがとってもわかりやすくなる。
「そんなん当たり前」という人もいるかもしれないけど
Gmail やら Twitter やらのログイン画面を見たら
実装されてなかったので一応。
label というのはフォームの部品とセットで使うやつで、
ある部品とその項目名を結びつけるやつね。
↓このようなチェックボックスがあるとき
次回から自動的にログイン
↓こんなふうにラベルを指定しておくと
テキスト部分とチェックボックスが関連づけられるので
テキストをクリックしても
チェックボックスにチェックを入れられるようになりますね。
小さいチェックボックスにマウスカーソルをあわせなくても
ラベル部分をクリックすればいいから楽ちん。
なんだけど、
これが指定されているかどうかは見た目では判断できないし
そもそもあんまりネットを使わないユーザーには
そんな機能があることすらわからないかもしれない。
なので、少しでもこれをわかりやすくするために
label にはスタイルシートでこれを指定するようにしたい。
こうしておくと、大抵のブラウザでは
ラベル部分にマウスカーソルを重ねたとき
カーソルの形が「ここクリックできますよ」という形に変わるので
とってもわかりやすいですね。
なんでタイトルが「必ずつけるようにしている」じゃなくて
「必ずつけたい」なのかというと、
今まで自分が作ったサイトの中に
実装できてないものがある気がするから。
主題と関係ないけど、
「○○したい」って便利かつズルい表現だと思う。
乱用は避けたいものですね。
関連エントリ
トラックバック
