画像をチェックボックスにする方法
画像をチェックボックスにする方法を紹介します。このサンプルでは、通常のチェックボックスを画面上では非表示にし、画像をクリックすることで選択・解除できるUIを作成します。文字だけのチェック項目よりも内容を視覚的に判断しやすく、複数の画像から好きなものを選んでもらいたい場面に利用できます。
商品画像からカラーやデザインを選択するECサイト、プロフィール画像の候補選択、写真カテゴリーの選択、会員サイトの好み設定など、画像そのものを選択肢として使いたい場合に適しています。画像をクリックすると選択状態になり、もう一度クリックすると解除できます。HTMLのlabel要素とcheckboxを組み合わせているため、JavaScriptを使わずに選択操作を実装できます。
HTMLでは画像や選択項目の内容を変更でき、CSSでは画像サイズ、画像同士の間隔、角丸、選択時の枠線やチェックマークなどを調整できます。画面幅が狭い場合は画像を1列に変更するため、スマートフォン・タブレット・PCでも利用できます。画像を見ながら直感的に複数項目を選択できるチェックボックスを作りたい場合に使いやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
画像をクリックするとチェック状態を切り替えられます。
6枚の画像を2行3列で表示しています。画像をクリックすると選択状態になり、もう一度クリックすると解除できます。複数の画像を同時に選択できます。
コードをコピーして使おう！
<!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-checkbox_wrap">
<!-- タイトル -->
<div class="image-checkbox_title">
好きな画像を選択
</div>
<!-- 説明文 -->
<p class="image-checkbox_text">
画像をクリックするとチェック状態を切り替えられます。
</p>
<!-- 画像チェックボックス一覧 -->
<div class="image-checkbox_list">
<!-- 画像1 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image1">
<img
class="image-checkbox_image"
src="images/image1.png"
alt="画像1">
</label>
<!-- 画像2 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image2">
<img
class="image-checkbox_image"
src="images/image2.png"
alt="画像2">
</label>
<!-- 画像3 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image3">
<img
class="image-checkbox_image"
src="images/image3.png"
alt="画像3">
</label>
<!-- 画像4 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image4">
<img
class="image-checkbox_image"
src="images/image4.png"
alt="画像4">
</label>
<!-- 画像5 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image5">
<img
class="image-checkbox_image"
src="images/image5.png"
alt="画像5">
</label>
<!-- 画像6 -->
<label class="image-checkbox_item">
<input
class="image-checkbox_input"
type="checkbox"
name="image"
value="image6">
<img
class="image-checkbox_image"
src="images/image6.png"
alt="画像6">
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは6個のcheckboxと画像をlabel要素で組み合わせ、画像をクリックするとチェック状態を切り替えられるようにします。CSSでは標準のチェックボックスを画面上では見えない状態にし、選択中の画像へ青い枠線とチェックマークを表示します。JavaScriptは使用しません。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
└── image6.png
各ファイルの役割
index.htmlは画像チェックボックス全体を構成するファイルです。6個のcheckboxと、それぞれに対応するimage1.pngからimage6.pngまでの画像を配置します。各画像をlabel要素で囲んでいるため、画像部分をクリックすると対応するチェックボックスの選択・解除を切り替えられます。
style.cssは画像チェックボックスの見た目を設定するファイルです。画像を3列で配置し、標準のチェックボックスは画面上では非表示にします。選択状態になると画像へ青い枠線を表示し、右上へチェックマークを表示します。画像の角丸、間隔、選択時の透明度などもこのファイルで変更できます。
imagesフォルダには、チェックボックスとして使用する6枚の画像を配置します。このサンプルではimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngを使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にimagesフォルダを作成します。使用する6枚の画像をimage1.pngからimage6.pngのファイル名でimagesフォルダへ配置してください。画像ファイル名を変更する場合は、index.htmlの各srcも実際のファイル名に合わせて変更します。
配置が完了したらsample/index.htmlをブラウザで開きます。表示された画像をクリックすると選択状態になり、青い枠線と右上のチェックマークが表示されます。もう一度同じ画像をクリックすると選択が解除されます。checkboxを使用しているため、複数の画像を同時に選択できます。
カスタマイズできる内容
index.htmlでは、表示する画像、各checkboxのvalue、画像のaltを変更できます。画像を差し替える場合はimagesフォルダへ画像を配置し、src="images/image1.png"などのファイル名を変更してください。
style.cssでは、全体の最大横幅、画像の列数、画像同士の間隔、画像の表示比率、角丸、選択時の枠線色、チェックマークの大きさや位置、選択中の画像の透明度などを変更できます。
数値調整
style.css
max-width:760px;
画像チェックボックス全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると画像一覧と外枠の間隔が広がります。
border-radius:18px;
全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
grid-template-columns:repeat(3,1fr);
画像の列数です。このサンプルでは3列で表示するため、6枚の画像が2行3列になります。
gap:16px;
画像同士の間隔です。値を大きくすると画像同士の間隔が広がり、小さくすると狭くなります。
aspect-ratio:4/3;
画像の表示比率です。このサンプルでは横4・縦3の比率で表示します。
border:3px solid transparent;
画像の枠線の太さです。選択時には同じ3pxの幅で青い枠線が表示されます。値を大きくすると選択時の枠線が太くなります。
border-radius:12px;
各画像の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
top:10px;、right:10px;
チェックマークの表示位置です。topは画像上端から、rightは画像右端からの間隔を表します。
width:32px;、height:32px;
チェックマーク背景の円の大きさです。値を大きくするとチェックマーク全体が大きくなります。
font-size:18px;
チェックマークの文字サイズです。値を大きくするとチェック記号が大きく表示されます。
opacity:.88;
選択中の画像の透明度です。1に近づけると元の画像に近い濃さになり、値を小さくすると薄く表示されます。
transition:0.2s;
枠線、透明度、チェックマークが切り替わる時間です。0.2秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、画面幅に合わせて全体が縮小されます。通常はgrid-template-columns:repeat(3,1fr);で画像を3列表示し、640px以下ではgrid-template-columns:1fr;へ変更して1列表示に切り替えます。また、スマートフォンでは全体の内側余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント