ホームページの選択項目を選択しやすくする方法

IT関連

ラジオボタンを少し使いやすくする話。参考URLに詳しく書いてあるけど、こっちにも書いておく。

参考資料

押しやすいチェックボックスやラジオボタンを作るCSS [ホームページ作成] All About

使いにくい例
<input name="radio" type="radio"> 使いにくい例１
<input name="radio" type="radio"> 使いにくい例２
<input type="checkbox"> 使いにくい例

使いにくい例１
使いにくい例２
使いにくい例

使いやすい例
<input type="radio" name="radio" id="radio1"><label for="radio1"> 使いやすい例１</label>
<input type="radio" name="radio" id="radio2"><label for="radio2"> 使いやすい例２</label>
<input type="checkbox" id="checkbox1"><label for="checkbox1"> 使いやすい例</label>




まとめ

使いにくい例だと文字列をクリックしても選択されないが、使いやすい例だと文字列をクリックしても選択される。参考URLによると↓の理屈だそうだ。

「input要素のid属性値」と「label要素のfor属性値」を一致させると、label要素内の文字列をクリックした場合に、（それに対応する）input要素をクリックしたのと同じ扱いになります。

2/3 押しやすいチェックボックスやラジオボタンを作るCSS [ホームページ作成] All About

僕が確認したところFirefox3とIE6では大丈夫だった。

本当にちょっとした差だけれど、やるのとやらないのではユーザの使い勝手が結構違うと思う。僕はWebはUIが命みたいなものだと考えていて、こういうちょっとしたことの積み重ねでユーザの使い勝手が全然変わってくるんだと思う。こういうちょっとしたところに気をつけて作成していきたいものだ。