RadioButton を利用して、画像を選択するUIを作成するコードを紹介します。
概要
HTMLページで画像を選択するUIを作成する場合にRadioButtonを利用すると、比較的容易に選択画面のUIを作成できます。
この記事では、RadioButtonを利用した画像選択のUIを作成します。
ラジオボタンを利用したシンプルな実装
はじめに、ラジオボタンを利用したシンプルなUIを実装します。
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="radiobutton-image.css" />
</head>
<body>
<div>Radio Buttonのデモです</div>
<div style="height:1.5rem"></div>
<input type="radio" id="radio1" name="g1" value="v1" checked="checked" />
<label for="radio1">
<img src="/img/01.png" />
</label>
<input type="radio" id="radio2" name="g1" value="v2" />
<label for="radio2">
<img src="/img/02.png" />
</label>
<input type="radio" id="radio3" name="g1" value="v3" />
<label for="radio3">
<img src="/img/03.png" />
</label>
<input type="radio" id="radio4" name="g1" value="v4" />
<label for="radio4">
<img src="/img/04.png" />
</label>
</body>
</html>
img {
width: 96px;
}
解説
RadioButtonで選択を表現します。Labelタグ内にimgタグを配置することで、画像をクリックすると、ラジオボタンのチェックがつき、画像を選択できます。
実行結果
上記のHTMLをWebブラウザで開きます。下図のページが表示されます。
画像をクリックすると、画像の左側のラジオボタンが選択状態になります。
別の画像をクリックすると選択項目が入れ替わります。
ラジオボタンを非表示にした選択UIの実装
先のラジオボタンを利用したUIで選択はできますが、画像を選択した表現が弱いです。
選択された画像に枠がつくなどの表現を実装したいです。また、選択した画像に枠がつけば、ラジオボタンの表示は不要にしたほうが良いです。
CSSを修正することで、ラジオボタンの表示やラベルに設定した画像の表現を変更できます。
コード
以下のHTMLファイル、CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="radiobutton-image-hidden.css" />
</head>
<body>
<div>Radio Buttonのデモです</div>
<div style="height:1.5rem"></div>
<input type="radio" id="radio1" name="g1" value="v1" checked="checked" class="HiddenRadio" />
<label for="radio1">
<img src="/img/01.png" />
</label>
<input type="radio" id="radio2" name="g1" value="v2" class="HiddenRadio"/>
<label for="radio2">
<img src="/img/02.png" />
</label>
<input type="radio" id="radio3" name="g1" value="v3" class="HiddenRadio"/>
<label for="radio3">
<img src="/img/03.png" />
</label>
<input type="radio" id="radio4" name="g1" value="v4" class="HiddenRadio"/>
<label for="radio4">
<img src="/img/04.png" />
</label>
</body>
</html>
img {
width: 96px;
}
.HiddenRadio {
display: none;
}
input[type="radio"]:checked + label > img {
outline:2px solid #0084e4;
}
解説
RadioButtonに
HiddenRadioクラスを設定します。
<input type="radio" id="radio1" name="g1" value="v1" checked="checked" class="HiddenRadio" />
CSSでHiddenRadioクラスのdisplay を noneに設定します。この設定によりラジオボタンのコントロールが画面上では非表示になります。
ただし、選択機能は有効です。
.HiddenRadio {
display: none;
}
input[type="radio"]:checked の記述でinputタグで、
type="radio"の属性があり、さらに
:checkedにより、ラジオボタンがチェックされている場合のスタイルを指定できます。
今回のコードではさらに
+ label > img を記述しているため、選択されているラジオボタンの直後のlabelタグ内の子要素のimgタグの書式を設定するセレクタになっています。
imgタグに2ピクセルの青色のoutlineを設定しています。この記述により、選択されたラジオボタン (画面上では非表示) のLabelタグ内の画像に枠線を表示します。
input[type="radio"]:checked + label > img {
outline:2px solid #0084e4;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
選択したい画像をクリックします。画像が選択され、青色の枠が表示されます。画面上では非表示ですが、ラジオボタンの選択も変化しています。
別の画像をクリックすると、クリックした画像に青枠がつきます。直前に選択していた画像の青色の枠は非表示になります。
ラジオボタンを利用して、画像を選択するUIを実装できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-06-18
作成日: 2023-06-18
