こんにちは（・∀・）
アンケートサイトの選択肢などでラジオボタンやチェックボックスが使われていて、時々クリックしづらかったりすることがあります。ラジオボタンやチェックボックスはHTMLのinput要素で作りますが、そのままだとボタンを押す範囲が狭すぎてクリックしづらいことがあります。
input要素でラジオボタンとチェックボックス
HTMLのinput要素だけでラジオボタンとチェックボックスを作ると…
サンプルデモ
HTML
<input type="radio" name="d1">奥穂高岳
<input type="radio" name="d1">槍ヶ岳
<input type="radio" name="d1">燕岳
<input type="checkbox">北岳
<input type="checkbox">甲斐駒ヶ岳
<input type="checkbox">仙丈ヶ岳
どうですか、ボタンの押せる範囲が丸と四角の選択部分だけなのでクリックしづらくありませんか。
label要素を加えてみる
HTMLにはラジオボタンやチェックボックスと組み合わせて使えるlabel要素があります。input要素とlabel要素を組み合わせて使えば、文字部分もクリックできるようになります。
サンプルデモ
HTML
<label><input type="radio" name="d3">奥穂高岳</label>
<label><input type="radio" name="d3">槍ヶ岳</label>
<label><input type="radio" name="d3">燕岳</label>
<label><input type="checkbox">北岳</label>
<label><input type="checkbox">甲斐駒ヶ岳</label>
<label><input type="checkbox">仙丈ヶ岳</label>
label要素の指定方法は上記のinput要素を囲むやり方の他、次のような方法もあります。
HTML
<input type="radio" id="test" name="d3">
<label for="test">富士山</label>
input要素のid属性値とlabel要素のfor属性値を一致させて関連づけます。この方法はinput要素とlabel要素が離れて配置されている場合に有効です。例えばテーブルの枠組みの中でinput要素とlabel要素を離して配置しなくてはいけない場合などです。
さらにラベル部分を装飾すれば文字部分もクリックできることを視覚的に伝えることもできます。
サンプルデモ
HTML
<label><input type="radio" name="d5">奥穂高岳</label>
<label><input type="radio" name="d5">槍ヶ岳</label>
<label><input type="radio" name="d5">燕岳</label>
<label><input type="checkbox">北岳</label>
<label><input type="checkbox">甲斐駒ヶ岳</label>
<label><input type="checkbox">仙丈ヶ岳</label>
CSS
label {
border: 1px solid #999;
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
label:hover {
background: #999;
}
fieldset要素とlegend要素でグループわけ
ラジオボタンとチェックボックスを作る際、fieldset要素とlegend要素でグループわけすると視覚的にさらに見やすくなります。
サンプルデモ
HTML
<fieldset>
<legend>北アルプス</legend>
<label><input type="radio" name="d7">奥穂高岳</label>
<label><input type="radio" name="d7">槍ヶ岳</label>
<label><input type="radio" name="d7">燕岳</label>
</fieldset>
<fieldset>
<legend>南アルプス</legend>
<label><input type="checkbox">北岳</label>
<label><input type="checkbox">甲斐駒ヶ岳</label>
<label><input type="checkbox">仙丈ヶ岳</label>
</fieldset>
CSS
fieldset {
margin: 5px 0;
padding: 2px 10px 10px 10px;
border: 1px dashed #777;
}
fieldset要素によって作られる枠線はブラウザによって異なりますので、最初からCSSで装飾しておく方法もあります。
テーブルセル内でラジオボタンとチェックボックス
テーブルセル内でラジオボタンやチェックボックスはクリックしやすいでしょうか…
サンプルデモ
| 登りたい | どちらでもない | 登りたくない | |
| 奥穂高岳 | |||
| 槍ヶ岳 | |||
| 燕岳 |
どうでしょうか、やはりボタンの押せる範囲が選択部分だけなのでクリックしづらいですね。
それではテーブルセル内のボタンもクリックしやすくしてみましょう。やり方は簡単です。input要素にdisplay: table-cellを加えます。
サンプルデモ
| 登りたい | どちらでもない | 登りたくない | |
| 奥穂高岳 | |||
| 槍ヶ岳 | |||
| 燕岳 |
HTML
<table>
<tr>
<td></td>
<td>登りたい</td>
<td>どちらでもない</td>
<td>登りたくない</td>
</tr>
<tr>
<td>奥穂高岳</td>
<td><label><input type="radio" id="d10-1" name="d10-1"></label></td>
<td><label><input type="radio" id="d10-2" name="d10-1"></label></td>
<td><label><input type="radio" id="d10-2" name="d10-1"></label></td>
</tr>
<tr>
<td>槍ヶ岳</td>
<td><label><input type="radio" id="d10-4" name="d10-2"></label></td>
<td><label><input type="radio" id="d10-5" name="d10-2"></label></td>
<td><label><input type="radio" id="d10-6" name="d10-2"></label></td>
</tr>
<tr>
<td>燕岳</td>
<td><label><input type="radio" id="d10-7" name="d10-2"></label></td>
<td><label><input type="radio" id="d10-8" name="d10-2"></label></td>
<td><label><input type="radio" id="d10-9" name="d10-2"></label></td>
</tr>
</table>
CSS
td {
border: 1px solid #999;
text-align: center;
}
table tr td input {
display: table-cell;
}
input要素にdisplay: table-cellを加えるだけでクリックしやすくなりました。
今回はラジオボタンやチェックボックスをクリックしやすくする方法についてご紹介しました。特に難しいことはしておりませんので簡単に導入できると思います。よろしければご活用ください。