画像をラジオボタンにする方法
画像をラジオボタンにする方法を紹介します。このサンプルでは、通常のラジオボタンの代わりに画像を選択肢として表示し、画像をクリックして1つを選べるUIをHTMLとCSSで作成します。選択した画像には青い枠線とチェックマークが表示されるため、現在どの項目を選んでいるのかを見た目で確認できます。
商品の種類やデザイン、プラン、テーマ、プロフィール画像など、文字だけでは内容を判断しにくい選択肢を画像から選んでもらいたい場面に利用できます。ECサイトの商品オプション、会員サイトのアイコン選択、申し込みフォームのデザイン選択など、複数の候補から1つだけ選択させたい場合に適しています。
JavaScriptを使用せず、HTMLのradio要素とCSSを組み合わせて実装します。画像や選択肢の文章はHTMLから変更でき、CSSでは画像サイズ、枠線、角丸、画像同士の間隔、選択時の色などを調整できます。画面幅が狭い場合にもレイアウトが調整されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画像をクリックすると選択状態になり、青い枠線とチェックマークが表示されます。別の画像をクリックすると選択が切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画像をラジオボタンにする方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 画像ラジオボタン全体 -->
<div class="image-radio-button_wrap">
<!-- タイトル -->
<div class="image-radio-button_title">
好きな画像を選択
</div>
<!-- 説明文 -->
<p class="image-radio-button_text">
画像をクリックして1つ選択してください。
</p>
<!-- 画像ラジオボタン一覧 -->
<div class="image-radio-button_list">
<!-- 選択肢1 -->
<label class="image-radio-button_item">
<!-- ラジオボタン -->
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image-01">
<!-- 画像カード -->
<span class="image-radio-button_card">
<!-- 選択肢画像 -->
<img
src="images/image1.png"
alt="画像1">
<!-- 項目名 -->
<span class="image-radio-button_name">
項目1
</span>
<!-- 選択時のチェックマーク -->
<span class="image-radio-button_check">
✓
</span>
</span>
</label>
<!-- 選択肢2 -->
<label class="image-radio-button_item">
<!-- ラジオボタン -->
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image-02">
<!-- 画像カード -->
<span class="image-radio-button_card">
<!-- 選択肢画像 -->
<img
src="images/image2.png"
alt="画像2">
<!-- 項目名 -->
<span class="image-radio-button_name">
項目2
</span>
<!-- 選択時のチェックマーク -->
<span class="image-radio-button_check">
✓
</span>
</span>
</label>
<!-- 選択肢3 -->
<label class="image-radio-button_item">
<!-- ラジオボタン -->
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image-03">
<!-- 画像カード -->
<span class="image-radio-button_card">
<!-- 選択肢画像 -->
<img
src="images/image3.png"
alt="画像3">
<!-- 項目名 -->
<span class="image-radio-button_name">
項目3
</span>
<!-- 選択時のチェックマーク -->
<span class="image-radio-button_check">
✓
</span>
</span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではradio要素と画像を組み合わせ、画像全体をクリックして1つの項目を選択できるラジオボタンを作成します。CSSでは3つの画像カードを横並びに配置し、選択した画像へ青い枠線とチェックマークを表示します。JavaScriptを使用せず、HTMLのラジオボタンとCSSの:checkedを利用して選択状態を切り替えます。
sample/
├── index.html
├── style.css
└── images/
├── image-01.jpg
├── image-02.jpg
└── image-03.jpg
各ファイルの役割
index.htmlは画像をラジオボタンとして選択できる部分を構成するファイルです。3つのradio要素へ同じname="image-choice"を指定することで、複数の画像から1つだけ選択できるようにしています。画像ファイル、画像の代替テキスト、「湖」「岩山」「山」などの項目名、各ラジオボタンのvalueを変更できます。
style.cssは画像カード全体のデザインと選択状態を設定するファイルです。画像カードの横幅、配置、間隔、枠線、角丸、影、画像サイズ、項目名、チェックマークなどを設定します。ラジオボタンが選択されると:checkedによって画像カードの枠線が青色へ変わり、画像の右上にチェックマークが表示されます。
imagesフォルダには、選択肢として表示する画像を配置します。サンプルではimage-01.jpg、image-02.jpg、image-03.jpgの3枚を使用します。画像自体は利用者が用意し、index.htmlで指定しているファイル名に合わせて配置します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、同じ階層にimagesフォルダを作成します。imagesフォルダには、選択肢として使用する3枚の画像をimage-01.jpg、image-02.jpg、image-03.jpgとして配置してください。別のファイル名を使用する場合は、index.htmlの各img要素にあるsrcも実際のファイル名に合わせて変更します。
ファイルを配置したあと、sample/index.htmlをブラウザで開いてください。画像カードをクリックすると、その画像に対応するラジオボタンが選択され、青い枠線とチェックマークが表示されます。別の画像をクリックすると選択先が切り替わり、同じname属性を持つ3つの選択肢から1つだけを選択できます。
カスタマイズできる内容
index.htmlでは、表示する画像、画像の代替テキスト、「湖」「岩山」「山」などの項目名、ラジオボタンのvalueを変更できます。選択肢として使用する画像を変更する場合はimagesフォルダへ画像を配置し、srcのファイルパスを変更します。
style.cssでは、全体の最大横幅、余白、背景色、画像カード同士の間隔、枠線、角丸、影、画像の表示比率、項目名の文字サイズ、選択時の枠線色、チェックマークの大きさや位置を変更できます。画像にはaspect-ratio:3 / 2;とobject-fit:cover;を指定しているため、異なるサイズの画像でも同じ表示比率に揃えられます。
数値調整
style.css
max-width:760px;
選択エリア全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
選択エリア全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
選択エリア全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
選択エリア全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると画像カードとの間隔が広がり、小さくすると狭くなります。
gap:16px;
画像カード同士の間隔です。値を大きくするとカード同士の間隔が広がり、小さくすると近くなります。
padding:6px;
画像カードの内側余白です。値を大きくすると画像とカード外側の間隔が広がります。
border:3px solid transparent;
画像カードの枠線の太さです。選択時にはこの枠線が青色へ変わります。3pxを大きくすると選択時の枠線が太くなり、小さくすると細くなります。
border-radius:14px;
画像カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
aspect-ratio:3 / 2;
画像を横3・縦2の比率で表示します。比率を変更すると画像の表示領域の縦横比が変わります。
border-radius:8px;
画像の角丸です。値を大きくすると画像の丸みが強くなります。
padding:12px 6px 6px;
画像下に表示する項目名の内側余白です。最初の12pxを変更すると画像と項目名の間隔を調整できます。
font-size:15px;
「湖」「岩山」「山」など、画像下に表示する項目名の文字サイズです。値を大きくすると文字が大きくなります。
width:30px;・height:30px;
選択時に表示するチェックマークの円の大きさです。値を大きくするとチェックマーク全体が大きくなり、小さくすると小さくなります。
top:12px;・right:12px;
チェックマークを画像カードの右上からどれだけ離して配置するかを指定します。値を変更するとチェックマークの表示位置が変わります。
font-size:18px;
チェックマークの文字サイズです。値を大きくするとチェックマークが大きく表示されます。
transition:border-color .2s ease;
選択時に画像カードの枠線色が切り替わる時間です。0.2秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
outline:3px solid rgba(37,99,235,.25);
キーボード操作でラジオボタンへフォーカスしたときに表示する外枠です。3pxを大きくすると外枠が太くなり、小さくすると細くなります。
outline-offset:3px;
フォーカス時の外枠と画像カードの間隔です。値を大きくすると外枠がカードから離れて表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは通常時にgrid-template-columns:repeat(3,minmax(0,1fr));を指定し、3つの画像カードを横3列で表示します。画像にはwidth:100%;を指定しているため、それぞれの列幅に合わせて画像が縮小されます。
画面幅が640px以下になると、grid-template-columns:1fr;へ切り替えて画像カードを縦1列で表示します。同時に選択エリアの内側余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。
コメント