画像付きラジオボタンを作る方法
画像付きラジオボタンを作る方法を紹介します。このサンプルでは、各選択肢の上に画像を表示し、その下に通常のラジオボタンと項目名を配置します。画像を確認しながらラジオボタンを選べるため、文字だけでは内容を判断しにくい選択肢でも、見た目を比較しながら1つを選択できます。
ECサイトの商品デザインやカラー選択、宿泊プラン、プロフィール画像、テーマ選択など、画像と選択肢をセットで見せたい場面に利用できます。このサンプルでは3つの画像を横並びに表示し、それぞれの画像の下にラジオボタンと項目名を配置しています。同じname属性を指定しているため、複数の候補から選択できるのは1つだけです。
JavaScriptは使用せず、HTMLとCSSだけで実装します。HTMLでは画像、項目名、radio要素のvalueや初期選択状態を変更でき、CSSでは画像サイズ、カードの余白、角丸、影、ラジオボタンの色、画像同士の間隔などを調整できます。画面幅640px以下では3列表示から1列表示へ切り替わるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
各画像の下にあるラジオボタンをクリックすると、3つの選択肢から1つを選択できます。
コードをコピーして使おう！
<!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_grid">
<!-- 選択肢1 -->
<label class="image-radio-button_item">
<!-- 選択肢1の画像 -->
<img
class="image-radio-button_image"
src="images/image1.png"
alt="画像1">
<!-- ラジオボタンと項目名 -->
<span class="image-radio-button_choice">
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image1">
<span class="image-radio-button_name">
項目1
</span>
</span>
</label>
<!-- 選択肢2 -->
<label class="image-radio-button_item">
<!-- 選択肢2の画像 -->
<img
class="image-radio-button_image"
src="images/image2.png"
alt="画像2">
<!-- ラジオボタンと項目名 -->
<span class="image-radio-button_choice">
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image2"
checked>
<span class="image-radio-button_name">
項目2
</span>
</span>
</label>
<!-- 選択肢3 -->
<label class="image-radio-button_item">
<!-- 選択肢3の画像 -->
<img
class="image-radio-button_image"
src="images/image3.png"
alt="画像3">
<!-- ラジオボタンと項目名 -->
<span class="image-radio-button_choice">
<input
class="image-radio-button_input"
type="radio"
name="image-choice"
value="image3">
<span class="image-radio-button_name">
項目3
</span>
</span>
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、選択肢として表示する3枚の画像で構成されています。HTMLでは画像、ラジオボタン、項目名を組み合わせた3つの選択肢を作成し、CSSではカードの並び方、画像サイズ、余白、角丸、影、ラジオボタンの色などを設定します。JavaScriptは使用せず、HTML標準のradio要素によって複数の候補から1つだけ選択できる構成です。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlは画像付きラジオボタン全体を構成するファイルです。「好きな画像を選択」のタイトル、説明文、3枚の画像、各項目名、radio要素のvalue、初期選択状態を変更できます。3つのradio要素には同じname="image-choice"を指定しているため、選択できる項目は1つだけです。
style.cssは画像付きラジオボタンの見た目を設定するファイルです。全体の横幅、カード同士の間隔、画像の比率、カードの余白、角丸、影、ラジオボタンの大きさや選択色、文字サイズなどを変更できます。
imagesフォルダには選択肢として表示する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngを使用します。画像ファイルは利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中へimagesフォルダを作成します。選択肢として使用する3枚の画像をimage1.png、image2.png、image3.pngのファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.html内の各srcも実際のファイル名に合わせて変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。3つの画像付き選択肢が表示され、各画像の下にラジオボタンと項目名が表示されます。ラジオボタンをクリックするとその項目が選択され、別の項目を選択すると前の選択が解除されます。
カスタマイズできる内容
index.htmlでは「好きな画像を選択」のタイトル、「画像の下にあるラジオボタンから1つ選択してください。」の説明文、各画像のsrcとalt、項目名、radio要素のvalueを変更できます。checkedを付ける項目を変更すると、ページを開いたときに最初から選択されている項目も変更できます。
選択肢を追加する場合は、既存のimage-radio-button_itemと同じ構造を追加します。同じグループから1つだけ選ばせる場合は、新しく追加したradio要素にも同じname="image-choice"を指定します。
style.cssでは全体の最大横幅、カードの列数、画像同士の間隔、カードの内側余白、画像の縦横比、角丸、影、ラジオボタンと項目名の間隔、ラジオボタンのサイズ、選択時の色などを変更できます。
数値調整
style.css
max-width:760px;
画像付きラジオボタン全体の最大横幅です。値を大きくすると全体が横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
grid-template-columns:repeat(3,minmax(0,1fr));
PC表示時に選択肢を3列で並べる設定です。3の値を変更すると1行に表示する列数を変更できます。
gap:16px;
各選択肢の間隔です。値を大きくするとカード同士が離れ、小さくすると近くなります。
padding:10px;
各カードの内側余白です。値を大きくすると画像とカード外枠の間隔が広がります。
border-radius:14px;
各カードの角丸です。値を大きくするとカードの丸みが強くなります。
box-shadow:0 8px 20px rgba(15,23,42,.08);
カードの影です。8pxや20pxを変更すると影の位置や広がりを調整できます。
aspect-ratio:3 / 2;
選択肢画像を横3・縦2の比率で表示します。
border-radius:8px;
画像の角丸です。値を大きくすると画像の丸みが強くなります。
gap:8px;
ラジオボタンと項目名の間隔です。値を大きくすると左右の間隔が広がります。
padding:14px 6px 4px;
ラジオボタンと項目名を配置する部分の余白です。最初の14pxを大きくすると画像との間隔が広がります。
width:18px;・height:18px;
ラジオボタンの大きさです。値を大きくするとラジオボタンが大きく表示されます。
font-size:16px;
項目名の文字サイズです。値を大きくすると項目名が大きく表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは全体へwidth:100%とmax-width:760pxを指定しているため、画面幅に合わせて縮小されます。
画面幅640px以下では全体の余白を24px 18pxへ変更し、grid-template-columns:1fr;によって3列表示から1列表示へ切り替えます。そのため、スマートフォン・タブレット・PCで利用できます。
コメント