Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/09/01こんにちは(・∀・)アンケートサイトの選択肢などでラジオボタンやチェックボックスが使われていて、時々クリックしづらかったりすることがあります。ラジオボタンやチェックボックスはHTMLのinput要素で作りますが、そのままだとボタンを押す範囲が狭すぎてクリックしづらいことがあります。仙丈ヶ岳どうでしょうか、ボタンの押せる範囲が丸と四角の選択部分だけなのでクリックしづらくありませんか。label要素を加えてみるHTMLにはラジオボタンやチェックボックスと組み合わせて使えるlabel要素があります。input要素とlabel要素を組み合わせて使えば、文字部分もクリックできるようになります。仙丈ヶ岳label要素の指定方法は上記のinput要素を囲むやり方の他、次のような方法もあります。for="test">富士山</label>input要素のid属性値とlabel要素のfor属性値を一致させて関連づけます。この方法はinput要素とlabel要素が離れて配置されている場合に有効です。テーブルの枠組みの中でinput要素とlabel要素を離して配置しなくてはいけない場合などです。ラベル部分を装飾すれば、文字部分もクリックできることを、視覚的に伝えることもできます。fieldset要素とlegend要素でグループ分けラジオボタンとチェックボックスを作る際、fieldset要素とlegend要素でグループ分けすると視覚的にさらに見やすくなります。仙丈ヶ岳fieldset要素によって作られる枠線はブラウザによって異なりますので、最初からCSSで装飾しておく方法もあります。ボタンの押せる範囲が選択部分だけなのでクリックしづらいですね。それではテーブルセル内のボタンもクリックしやすくしてみましょう。labelにdisplay:blockを指定してwidthとheightを100%に設定します。これでセルのどこをクリックしてもチェックボックスを選択できるようになりました。ラジオボタンも同じ方法で選択しやすくなります。今回はラジオボタンやチェックボックスをクリックしやすくする方法についてご紹介しました。難しいことはしておりませんので簡単に導入できると思います。よろしければご活用ください。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。