画像付きチェックボックスを作る方法
画像付きチェックボックスを作る方法を紹介します。このサンプルでは、HTMLのcheckboxと画像を組み合わせ、チェックボックスの下に画像を表示する選択項目を作成します。通常のチェックボックスをそのまま表示するため、チェックの有無を確認しながら、画像を見て項目を選択できます。
商品やプランの選択、アンケート、会員サイトの設定画面など、文字だけでは内容を判断しにくい項目を画像と一緒に表示したい場合に利用できます。各項目はチェックボックスと画像を縦方向にまとめ、6個の項目を2行3列で表示します。checkboxを使用しているため、複数の項目を同時に選択することもできます。
HTMLではチェックボックスの表示内容、value、画像ファイル、代替テキストを変更できます。CSSでは一覧の列数や間隔、画像サイズ、角丸などを調整できます。画面幅640px以下では1列表示へ切り替わるため、スマートフォン・タブレット・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-checkbox-with-image_wrap">
<!-- タイトル -->
<div class="image-checkbox-with-image_title">
好きな画像を選択
</div>
<!-- 説明文 -->
<p class="image-checkbox-with-image_text">
チェックボックスの下に画像を表示しています。
</p>
<!-- 画像付きチェックボックス一覧 -->
<div class="image-checkbox-with-image_list">
<!-- 画像1 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image1">
画像1
</span>
<img
class="image-checkbox-with-image_image"
src="images/image1.png"
alt="画像1">
</label>
<!-- 画像2 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image2">
画像2
</span>
<img
class="image-checkbox-with-image_image"
src="images/image2.png"
alt="画像2">
</label>
<!-- 画像3 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image3">
画像3
</span>
<img
class="image-checkbox-with-image_image"
src="images/image3.png"
alt="画像3">
</label>
<!-- 画像4 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image4">
画像4
</span>
<img
class="image-checkbox-with-image_image"
src="images/image4.png"
alt="画像4">
</label>
<!-- 画像5 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image5">
画像5
</span>
<img
class="image-checkbox-with-image_image"
src="images/image5.png"
alt="画像5">
</label>
<!-- 画像6 -->
<label class="image-checkbox-with-image_item">
<span class="image-checkbox-with-image_check">
<input
class="image-checkbox-with-image_input"
type="checkbox"
name="image"
value="image6">
画像6
</span>
<img
class="image-checkbox-with-image_image"
src="images/image6.png"
alt="画像6">
</label>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、表示する6枚の画像で構成されています。HTMLではチェックボックス、画像、タイトル、説明文を配置し、CSSではチェックボックスと画像を組み合わせたレイアウトや余白、枠線、角丸などのデザインを設定します。JavaScriptを使用せず、HTMLのチェックボックスをそのまま利用する構成です。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
└── image6.png
各ファイルの役割
index.htmlは画像付きチェックボックス全体を構成するファイルです。「好きな画像を選択」のタイトル、説明文、チェックボックスの文字、画像ファイルの指定などを変更できます。各項目をlabel要素で囲んでいるため、チェックボックスだけでなく項目内をクリックして選択できます。
style.cssは画像付きチェックボックスのデザインを設定するファイルです。全体の横幅や余白、3列のグリッド配置、チェックボックスのサイズ、画像の表示比率、枠線、角丸、背景色などを変更できます。
imagesフォルダにはチェックボックスの下へ表示する画像を保存します。このサンプルではimage1.pngからimage6.pngまでの6枚を使用します。画像を変更する場合は、imagesフォルダ内の画像を差し替えるか、index.htmlのsrc属性を使用する画像のファイル名に変更します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中にimagesフォルダを作成してください。imagesフォルダにはimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngを配置します。すべてのファイルを配置したあと、sample/index.htmlをブラウザで開くと画像付きチェックボックスが表示されます。
各項目ではチェックボックスの下に対応する画像が表示されます。選択したい項目をクリックするとチェックを付けることができ、複数の項目を同時に選択できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、「画像1」から「画像6」までの表示文字、チェックボックスのvalue、画像のsrc属性、alt属性を変更できます。使用する画像を変更する場合は、imagesフォルダへ画像を配置してsrc属性のファイル名を合わせてください。項目を追加・削除することで、表示する画像付きチェックボックスの数も変更できます。
style.cssでは全体の最大横幅、内側余白、背景色、枠線、角丸、項目同士の間隔、チェックボックスの大きさ、画像の比率や角丸などを変更できます。grid-template-columns:repeat(3,1fr);を変更すると、1行に表示する項目数も調整できます。
数値調整
style.css
max-width:760px;
画像付きチェックボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると枠線と内容の間隔が広がります。
border-radius:18px;
全体を囲む枠の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると画像付きチェックボックス一覧との間隔が広がります。
grid-template-columns:repeat(3,1fr);
PC表示で1行に並べる項目数です。このサンプルでは3列で表示します。repeat内の3を変更すると列数を調整できます。
gap:16px;
各項目同士の間隔です。値を大きくすると項目同士が離れ、小さくすると近くなります。
padding:12px;
各項目の内側余白です。値を大きくするとチェックボックスや画像と枠線の間隔が広がります。
border-radius:12px;
各項目を囲む枠の角丸です。値を大きくすると丸みが強くなります。
gap:10px;
チェックボックス部分と画像の間隔です。値を大きくすると上下の間隔が広がります。
width:20px;・height:20px;
チェックボックスの大きさです。値を大きくするとチェックボックスが大きく表示されます。
aspect-ratio:4/3;
画像の表示比率です。このサンプルでは横4・縦3の比率で表示します。
border-radius:8px;
画像の角丸です。値を大きくすると画像の四隅の丸みが強くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、画面幅に合わせて全体が縮小されます。通常はgrid-template-columns:repeat(3,1fr);で3列表示し、640px以下ではgrid-template-columns:1fr;へ変更して1列表示に切り替えます。また、スマートフォンでは全体の内側余白をpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント