使いやすいチェックボックスやラジオボタンにする例
詳しい記述方法や表示例は、解説記事本文をご参照下さい。
【サンプルの目次】
▼何も対策をしていない場合
林檎
蜜柑
葡萄
林檎
蜜柑
葡萄
クリック可能な範囲が狭すぎる。
▼label要素を使った場合
文字部分もクリック可能になる。（しかし、その事実は実際にクリックしてみるまで分からない。）
ラベルの途中で改行されてしまう。
▼label要素を使って装飾も加えた場合
クリック可能な範囲も分かりやすいし、ラベルの途中で改行されることもない。
▼ラジオボタンの場合はデフォルトで1つ選択しておく
▼選択範囲が分かりにくい
[野菜]
[果物]
どこからいくつ選択可能なのかが分かりにくい。
▼fieldset要素を使って選択範囲を分かりやすくした例
2つのグループがあって、それぞれ1つずつ選べば良いことが分かりやすい。
※IEでは薄い色で枠線が表示されます。
▼fieldset要素・legend要素・label要素をそれぞれCSSで装飾
グループの題名を見やすく装飾して、さらに「クリック可能な範囲」も明確なデザインにすると、より使いやすくなる。
解説記事に戻る