カード型チェックボックスを作る方法
カード型チェックボックスを作る方法を紹介します。このサンプルでは、通常のチェックボックスをカード全体で選択できるデザインへ変更します。カードをクリックするとチェック状態が切り替わり、選択中のカードには青い枠線・背景色・チェックマークが表示されます。HTMLとCSSだけで動作するため、JavaScriptや外部ライブラリは使用しません。
カード内にはタイトルと説明文を表示できるため、文字だけのチェックボックスよりも選択肢の内容を詳しく伝えられます。会員サイトの興味分野、ECサイトの商品オプション、管理画面の機能設定、料金プランの追加項目、お問い合わせ画面の希望内容など、複数の項目を分かりやすく選択させたい場面で利用できます。
表示するタイトルや説明文、送信時の値はHTMLから変更できます。カードの列数、背景色、枠線、角丸、余白、チェックマークの色などはCSSから調整できます。画面幅に応じて3列・2列・1列へ切り替わるレスポンシブ対応のため、スマートフォン・タブレット・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="card-checkbox_wrap">
<!-- チェックボックスエリアのタイトル -->
<div class="card-checkbox_title">
カード型チェックボックス
</div>
<!-- 操作方法を案内する説明文 -->
<p class="card-checkbox_text">
必要な項目をカードごとクリックして選択してください。
</p>
<!-- 3個のカード型チェックボックスを並べる一覧 -->
<div class="card-checkbox_list">
<!-- HTMLカードの選択状態を管理するチェックボックス -->
<input
class="card-checkbox_input"
id="card-checkbox-html"
type="checkbox"
name="skills[]"
value="html">
<!-- HTMLカード全体をクリック可能にするラベル -->
<label
class="card-checkbox_label"
for="card-checkbox-html">
<!-- HTMLカードの選択時に表示するチェックマーク -->
<span
class="card-checkbox_mark"
aria-hidden="true">
✓
</span>
<!-- HTMLを表すアイコン -->
<span
class="card-checkbox_icon"
aria-hidden="true">
H
</span>
<!-- HTMLカードの項目名 -->
<div class="card-checkbox_name">
HTML
</div>
<!-- HTMLカードの説明文 -->
<p class="card-checkbox_description">
Webページの文章や画像など、基本となる構造を作成します。
</p>
</label>
<!-- CSSカードの選択状態を管理するチェックボックス -->
<input
class="card-checkbox_input"
id="card-checkbox-css"
type="checkbox"
name="skills[]"
value="css">
<!-- CSSカード全体をクリック可能にするラベル -->
<label
class="card-checkbox_label"
for="card-checkbox-css">
<!-- CSSカードの選択時に表示するチェックマーク -->
<span
class="card-checkbox_mark"
aria-hidden="true">
✓
</span>
<!-- CSSを表すアイコン -->
<span
class="card-checkbox_icon"
aria-hidden="true">
C
</span>
<!-- CSSカードの項目名 -->
<div class="card-checkbox_name">
CSS
</div>
<!-- CSSカードの説明文 -->
<p class="card-checkbox_description">
色や余白、配置など、Webページの見た目を整えます。
</p>
</label>
<!-- JavaScriptカードの選択状態を管理するチェックボックス -->
<input
class="card-checkbox_input"
id="card-checkbox-javascript"
type="checkbox"
name="skills[]"
value="javascript">
<!-- JavaScriptカード全体をクリック可能にするラベル -->
<label
class="card-checkbox_label"
for="card-checkbox-javascript">
<!-- JavaScriptカードの選択時に表示するチェックマーク -->
<span
class="card-checkbox_mark"
aria-hidden="true">
✓
</span>
<!-- JavaScriptを表すアイコン -->
<span
class="card-checkbox_icon"
aria-hidden="true">
J
</span>
<!-- JavaScriptカードの項目名 -->
<div class="card-checkbox_name">
JavaScript
</div>
<!-- JavaScriptカードの説明文 -->
<p class="card-checkbox_description">
クリックや表示切り替えなど、ページへ動きを追加します。
</p>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは HTML と CSS の2ファイルで構成されています。画像をクリックするとカード全体が選択状態へ切り替わるチェックボックスを実装しています。JavaScriptは使用しておらず、HTMLとCSSだけで動作するため、そのまま利用しやすい構成です。
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 は画像付きチェックボックスのHTMLを記述します。画像や項目名、選択肢を追加・変更する場合はこのファイルを編集します。
style.css はレイアウトや配色、カードデザイン、選択時の枠線やチェックマークなど見た目を管理します。サイズや余白、色、角丸などもこのファイルから変更できます。
設置方法・使い方
sample フォルダ内へ index.html・style.css・images フォルダを配置します。使用する画像を images フォルダへ保存し、index.html の画像パスを書き換えてください。その後 sample/index.html をブラウザで開くと利用できます。
カスタマイズできる内容
画像、項目名、説明文、カード数は index.html で変更できます。背景色、文字色、枠線、角丸、余白、カードサイズ、チェックマークのデザインや配置は style.css で自由に調整できます。
数値調整
max-width を変更すると全体の横幅が変わります。
padding を変更すると内側の余白が変わります。
gap を変更するとカード同士の間隔が変わります。
font-size を変更するとタイトルや説明文、アイコンの文字サイズが変わります。
border-radius を変更するとカードやチェックマークの角丸が変わります。
width・height を変更するとチェックマークやアイコンのサイズが変わります。
レスポンシブ対応
style.css の media query によりレスポンシブ対応しています。PCでは3列、タブレットでは2列、スマートフォンでは1列表示へ自動で切り替わります。また、width:100%・max-width を使用しているため、画面幅に応じて自然にレイアウトが調整されます。
コメント