【Labs】クリックしやすいラジオボタンとチェックボックス

こんにちは（・∀・）

アンケートサイトの選択肢などでラジオボタンやチェックボックスが使われていて、時々クリックしづらかったりすることがあります。ラジオボタンやチェックボックスはHTMLのinput要素で作りますが、そのままだとボタンを押す範囲が狭すぎてクリックしづらいことがあります。

Contents

1. input要素でラジオボタンとチェックボックス
2. label要素を加えてみる
3. fieldset要素とlegend要素でグループ分け
4. テーブルセル内でラジオボタンとチェックボックス

1. 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">仙丈ヶ岳

Result

どうでしょうか、ボタンの押せる範囲が丸と四角の選択部分だけなのでクリックしづらくありませんか。

2. 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>

Result

label要素の指定方法は上記のinput要素を囲むやり方の他、次のような方法もあります。

HTML

<input type="radio" name="test" id="test">
<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;
}

Result

3. 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;
}

Result

fieldset要素によって作られる枠線はブラウザによって異なりますので、最初からCSSで装飾しておく方法もあります。

4. テーブルセル内でラジオボタンとチェックボックス

テーブルセル内でラジオボタンやチェックボックスはクリックしやすいでしょうか...

Result

どうでしょうか、やはりボタンの押せる範囲が選択部分だけなのでクリックしづらいですね。

それではテーブルセル内のボタンもクリックしやすくしてみましょう。やり方は簡単です。labelにdisplay:blockを指定してwidthとheightを100%に設定します。

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;
}
td label {
  display: block;
  width: 100%;
  height: 100%;
}
td input {
  margin: 0 2px 10px 0;
}

Result

これでセルのどこをクリックしてもチェックボックスを選択できるようになりました。ラジオボタンも同じ方法で選択しやすくなります。

今回はラジオボタンやチェックボックスをクリックしやすくする方法についてご紹介しました。特に難しいことはしておりませんので簡単に導入できると思います。よろしければご活用ください。

関連リンク

【HTMLリファレンス】input要素
【HTMLリファレンス】label要素
【HTMLリファレンス】fieldset要素
【HTMLリファレンス】legend要素