Web技術系中心に割と何でも更新中

【CSS・Query】ラジオボタンのUIを向上させる方法

Programming Web

Web制作者

Web制作者
「ラジオボタンをデフォルトで使うと見た目がダサいな…もうちょっと見栄えを良くしてUI向上させたい」

こういった悩みにお答えします。

本記事の内容

  • CSS・jQueryでラジオボタンのUIを向上させる方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Web上での問い合わせフォーム、シミュレーション画面などでラジオボタンがしばしば使用されます。

下のラジオボタンを見てください。
CSSで装飾をしていないデフォルトのラジオボタンです。

 ラジオボタンサンプル1
 ラジオボタンサンプル2

ラジオボタンはこのデフォルトの状態が一般的に知られる形ですが、デフォルトのスタイルのままだとサイトデザインに対して浮いてしまったりして、ちょっと使いづらいですよね。

今回はラジオボタンをCSSとjQueryを使ってUIを向上させる方法を紹介します。
(ユーザーにとって使いやすいかつ視覚的に分かりやすくする)

仕様とイメージ

簡単な仕様は下記の通りです。

仕様

  • クリックしてアクティブになったら背景・文字色が変わる
  • クリックして非アクティブになったら背景・文字色が元に戻る

実装イメージ

ラジオボタン実装イメージ

デフォルトのラジオボタンではなく、視覚的にわかりやすく装飾しています。

ラジオボタンというよりも、普通のボタンのように感覚的に項目をクリックさせることを狙いとしています。

実装方法

具体的な実装方法を詳しく説明します。

HTML

まずはhtmlで問い合わせフォームを組みます。
下記HTMLのソースコード。

<div id="radio_demo">
	<ul class="clearfix">
		<li class="even">
			<div id="btn_radio_sample0" class="switch_off">ラジオボタン1</div>
			<input id="radio_sample0" style="display:none;" type="radio" name="radio_sample" value="0">
		</li>
		<li class="odd">
			<div id="btn_radio_sample1" class="switch_off">ラジオボタン2</div>
			<input id="radio_sample1" style="display:none;" type="radio" name="radio_sample" value="1">
		</li>
		<li class="even">
			<div id="btn_radio_sample2" class="switch_off">ラジオボタン3</div>
			<input id="radio_sample2" style="display:none;" type="radio" name="radio_sample" value="2">
		</li>
	</ul>
</div>

1つのliタグ内に、div要素とinput要素をペアにして記述します。
inputタグは属性をradioにして、display:none;で非表示にしておきます。見た目にはデフォルトのラジオボタンが見えない状態になります。

実際にボタンの役割を担うのはdivタグのほうで、このdivタグにCSSでスタイルを指定します。divタグにはそれぞれbtn_radio_sample0~2のid名をふります。

最初にラジオボタンが選択されていない状態を想定して、switch_offという共通のクラスを付与します。(後ほどjQueryを使って、クリックされた時にswitch_onというクラスに切り替えます。)

CSS

次はCSSでスタイルを指定して見た目を整えてボタンらしい形にします。

#radio_demo li {
	float: left;
	margin-right: 18px;
	line-height: 40px;
	list-style: none;
}
#radio_demo li:last-child {
	margin-right: 0;
}
#radio_demo li .switch_off {
	border: 2px solid #BBBBBB;
	border-radius: 4px;
	text-align: center;
	font-size: 19px;
	font-weight: bold;
	padding: 15px 10px;
	width: 220px;
	color: #313131;
	line-height: 40px;
	background-color: #fff;
	cursor: pointer;
}
#radio_demo li .switch_on {
	border: 2px solid #6B4646;
	border-radius: 4px;
	text-align: center;
	font-size: 19px;
	font-weight: bold;
	padding: 15px 10px;
	width: 220px;
	color: #fff;
	line-height: 40px;
	background-color: #6B4646;
	cursor: pointer;
}

HTMLの記述のところでも記述しましたが、inputタグはdisplay:none;の状態なので、inputタグに対してはCSSでスタイルを指定しません。

switch_off(未選択)とswitch_on(選択)のクラスを用意して、異なる2通りのスタイルを指定します。

switch_offswitch_onの枠線(border)、背景色(background-color)、文字色(color)を変えて違いを出します。

また、cursor:pointer;を記述して、マウスオーバー時にリンクカーソルに変化するようにしておくことで、クリック可能だということ明示できます。

今回はボタンをマウスオーバーした際にもスタイルが変化して、視覚的に分かりやすいようにしています。

jQuery

見た目が整ったら、次は動きをつけます。

jQueryの読み込み

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

headタグ内でjqueryを読み込みます。

/* ラジオボタン1 */
$("#btn_radio_sample0").click(function () {
	$("#radio_sample0").prop("checked",true);
	$("#btn_radio_sample0").addClass("switch_on");
	$("#btn_radio_sample1").addClass("switch_off");
	$("#btn_radio_sample2").addClass("switch_off");
	$("#btn_radio_sample0").removeClass("switch_off");
	$("#btn_radio_sample1").removeClass("switch_on");
	$("#btn_radio_sample2").removeClass("switch_on");
});
/* ラジオボタン2 */
$("#btn_radio_sample1").click(function () {
	$("#radio_sample1").prop("checked",true);
	$("#btn_radio_sample1").addClass("switch_on");
	$("#btn_radio_sample0").addClass("switch_off");
	$("#btn_radio_sample2").addClass("switch_off");
	$("#btn_radio_sample1").removeClass("switch_off");
	$("#btn_radio_sample0").removeClass("switch_on");
	$("#btn_radio_sample2").removeClass("switch_on");
});
/* ラジオボタン3 */
$("#btn_radio_sample2").click(function () {
	$("#radio_sample2").prop("checked",true);
	$("#btn_radio_sample2").addClass("switch_on");
	$("#btn_radio_sample0").addClass("switch_off");
	$("#btn_radio_sample1").addClass("switch_off");
	$("#btn_radio_sample2").removeClass("switch_off");
	$("#btn_radio_sample0").removeClass("switch_on");
	$("#btn_radio_sample1").removeClass("switch_on");
});

実際にボタンへ動きを付けるためのjavascriptのコードはbody閉じタグの直前に記述します(head内だと動作がうまくいかないので)。

jQueryのclickメソッドで、ボタンクリック時にラジオボタンとボタンの状態を切り替えを行う処理をします。

ラジオボタンそれぞれに動きをつけるわけですが、例としてラジオボタン1に対するコードを見ていきます。

$("#btn_radio_sample0").click(function(){})

ラジオボタン1をクリックした時に中のfunctionを実行するわけですね。

$("#radio_sample0").prop("checked",true);

propメソッドでラジオボタン1のchecked属性をcheckedにして、選択された状態にします。

$("#btn_radio_sample0").addClass("switch_on");
$("#btn_radio_sample1").addClass("switch_off");
$("#btn_radio_sample2").addClass("switch_off");

addClassメソッドでボタン1のクラスをswitch_onにして、残りのボタン2、3のクラスをswitch_offにします。

$("#btn_radio_sample0").removeClass("switch_off");
$("#btn_radio_sample1").removeClass("switch_on");
$("#btn_radio_sample2").removeClass("switch_on");

emoveClassメソッドでボタン1のswitch_offを削除します。

また、ボタン1をクリックする前にボタン2もしくはボタン3をクリックしている状態の場合、ボタン2、3にswitch_onクラスがついているかもしれないので、switch_onを削除します。ラジオボタン2、3をクリックした時の動きも同様です。

主要ブラウザのディベロッパーツールなどで動作を確認するといいでしょう。

onchange使用時の問題点

propメソッドを使ってラジオボタンやチェックボックスの状態を変更するとき、onchangeを設定している場合にonchangeイベントが発生しなくなる問題がありました。

今回はonchangeは設定してませんでしたが、もしonchangeを設定してるラジオボタンやチェックボックスをpropメソッドで状態変更する場合は、prop('checked', true).trigger('change')のようにtriggerを使う必要があるようです。

まとめ

今回のjQueryのコードの書き方だと、ラジオボタンが増えれば増えるほど無駄にコードの量が増えるというデメリットがあります。

しかし、一つのフォームでラジオボタンを何十個も使うことはあまり現実的では無いと思うので、今回書いたコードで十分事足りるかと思います。

簡単なコードでラジオボタンを見た目にも操作にもわかりやすくしてユーザビリティを向上させることができることが分かったかと思うので、まだやったことないという方は一度試してみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果