画像クリックで選択できるチェックボックスを作る方法
画像クリックで選択できるチェックボックスを作る方法を紹介します。このサンプルでは、画像全体をクリックするとチェック状態が切り替わり、選択した画像へ青い枠線とチェックマークを表示します。HTMLとCSSだけで実装できるため、JavaScriptや外部ライブラリを使用せずに画像選択UIを作成できます。
商品画像、デザイン候補、プロフィール画像、旅行先、サービス内容など、画像を見ながら複数の項目を選択させたい場面で利用できます。ECサイトの商品オプション、会員サイトの興味設定、アンケート画面、管理画面の画像選択など、文字だけでは内容が伝わりにくい選択肢にも適しています。
配布用コードでは、利用者が用意した画像を sample/images/ フォルダへ配置して使用します。画像ファイル名や代替テキストはHTMLから変更でき、画像の大きさ、列数、枠線、角丸、選択時の色などはCSSから調整できます。画面幅に応じて列数が変わるため、スマートフォン・タブレット・PCでも利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
選択したい画像をクリックしてください。複数選択できます。
画像をクリックすると青い枠線とチェックマークが表示され、もう一度クリックすると選択を解除できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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-select-checkbox_wrap">
<!-- 画像選択エリアのタイトル -->
<div class="image-select-checkbox_title">
画像をクリックして選択
</div>
<!-- 操作方法を案内する説明文 -->
<p class="image-select-checkbox_text">
選択したい画像をクリックしてください。複数選択できます。
</p>
<!-- 6個の画像チェックボックスを並べる一覧 -->
<div class="image-select-checkbox_list">
<!-- 画像01の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-01"
type="checkbox"
name="images[]"
value="image-01">
<!-- 画像01全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-01">
<!-- 選択肢として表示する画像01 -->
<img
class="image-select-checkbox_image"
src="images/image-01.jpg"
alt="選択画像01">
<!-- 画像01の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
<!-- 画像02の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-02"
type="checkbox"
name="images[]"
value="image-02"
>
<!-- 画像02全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-02">
<!-- 選択肢として表示する画像02 -->
<img
class="image-select-checkbox_image"
src="images/image-02.jpg"
alt="選択画像02">
<!-- 画像02の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
<!-- 画像03の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-03"
type="checkbox"
name="images[]"
value="image-03">
<!-- 画像03全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-03">
<!-- 選択肢として表示する画像03 -->
<img
class="image-select-checkbox_image"
src="images/image-03.jpg"
alt="選択画像03">
<!-- 画像03の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
<!-- 画像04の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-04"
type="checkbox"
name="images[]"
value="image-04">
<!-- 画像04全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-04">
<!-- 選択肢として表示する画像04 -->
<img
class="image-select-checkbox_image"
src="images/image-04.jpg"
alt="選択画像04">
<!-- 画像04の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
<!-- 画像05の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-05"
type="checkbox"
name="images[]"
value="image-05"
>
<!-- 画像05全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-05">
<!-- 選択肢として表示する画像05 -->
<img
class="image-select-checkbox_image"
src="images/image-05.jpg"
alt="選択画像05">
<!-- 画像05の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
<!-- 画像06の選択状態を管理するチェックボックス -->
<input
class="image-select-checkbox_input"
id="image-select-checkbox-06"
type="checkbox"
name="images[]"
value="image-06">
<!-- 画像06全体をクリック可能にするラベル -->
<label
class="image-select-checkbox_label"
for="image-select-checkbox-06">
<!-- 選択肢として表示する画像06 -->
<img
class="image-select-checkbox_image"
src="images/image-06.jpg"
alt="選択画像06">
<!-- 画像06の選択時に表示するチェックマーク -->
<span
class="image-select-checkbox_mark"
aria-hidden="true">
✓
</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTMLとCSSの2ファイルで構成されています。HTMLでは画像付きチェックボックスを配置し、CSSでは画像のレイアウトや選択時の枠線、チェックマークの表示、レスポンシブ対応を行います。JavaScriptを使用せず、画像をクリックするだけでチェックのオン・オフを切り替えられます。
sample/
├── index.html
├── style.css
└── images/
├── image-01.jpg
├── image-02.jpg
├── image-03.jpg
├── image-04.jpg
├── image-05.jpg
└── image-06.jpg
各ファイルの役割
index.html は画像付きチェックボックスを表示するファイルです。画像ファイル名、画像枚数、代替テキストなどを編集できます。
style.css はレイアウトや色、枠線、角丸、チェックマーク、レスポンシブ表示を設定します。
images フォルダには表示する画像を配置します。画像を差し替えるだけで簡単に内容を変更できます。
設置方法・使い方
sample フォルダを作成し、index.html・style.css・images フォルダを配置します。images フォルダへ画像を保存したら、sample/index.html をブラウザで開いて利用できます。画像をクリックするとチェック状態の切り替えを確認できます。
カスタマイズできる内容
index.html では画像ファイル、画像枚数、代替テキストを変更できます。style.css では表示列数、画像サイズ、余白、文字サイズ、枠線、角丸、チェックマークの色や大きさ、背景色などを自由に調整できます。
数値調整
max-width は全体の横幅を変更できます。
padding は内側の余白を変更できます。
gap は画像同士の間隔を変更できます。
border-radius は画像やカードの角丸を変更できます。
border の太さを変更すると選択時の枠線の太さが変わります。
width・height はチェックマークの大きさを変更できます。
top・right はチェックマークの表示位置を変更できます。
font-size はタイトル・説明文・チェックマークの文字サイズを変更できます。
レスポンシブ対応
style.css の media query を利用して画面幅に応じて表示列数を切り替えています。PCでは3列、タブレットでは2列、スマートフォンでは1列表示になるため、さまざまな画面サイズで画像を見やすく選択できます。
コメント