カード型チェックボックスを作る方法【HTML/CSS・サンプルコード付き】

タイトル・説明文・サイズ・配置・背景色・枠線・影・文字などを設定して、HTMLとCSSを自動生成できます。

カード型チェックボックスを作る方法

カード型チェックボックスを作る方法を紹介します。このサンプルでは、通常のチェックボックスをカード全体で選択できるデザインへ変更します。カードをクリックするとチェック状態が切り替わり、選択中のカードには青い枠線・背景色・チェックマークが表示されます。HTMLとCSSだけで動作するため、JavaScriptや外部ライブラリは使用しません。

カード内にはタイトルと説明文を表示できるため、文字だけのチェックボックスよりも選択肢の内容を詳しく伝えられます。会員サイトの興味分野、ECサイトの商品オプション、管理画面の機能設定、料金プランの追加項目、お問い合わせ画面の希望内容など、複数の項目を分かりやすく選択させたい場面で利用できます。

表示するタイトルや説明文、送信時の値はHTMLから変更できます。カードの列数、背景色、枠線、角丸、余白、チェックマークの色などはCSSから調整できます。画面幅に応じて3列・2列・1列へ切り替わるレスポンシブ対応のため、スマートフォン・タブレット・PCでも利用しやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カード型チェックボックス

必要な項目をカードごとクリックして選択してください。

HTML

Webページの文章や画像など、基本となる構造を作成します。

CSS

色や余白、配置など、Webページの見た目を整えます。

JavaScript

クリックや表示切り替えなど、ページへ動きを追加します。

カードをクリックすると青い枠線・背景色・チェックマークが表示され、もう一度クリックすると選択を解除できます。

コードをコピーして使おう！

<!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>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* カード型チェックボックス全体 */
.card-checkbox_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:900px; /* 全体の最大横幅。値を大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:32px; /* 全体の内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* カード型チェックボックス全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.card-checkbox_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの文字を太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行同士の間隔が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.card-checkbox_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとカード一覧との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行同士の間隔が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* カード一覧 */
.card-checkbox_list{
  display:grid; /* カードをグリッドレイアウトで並べる */
  grid-template-columns:repeat(3,minmax(0,1fr)); /* PCでは同じ横幅の3列で表示 */
  gap:16px; /* カード同士の間隔。値を大きくするとカード間の余白が広がる */
}

/* 選択状態を管理する本来のチェックボックス */
.card-checkbox_input{
  position:absolute; /* 通常のレイアウトから外して視覚的に隠す */
  width:1px; /* 視覚的に隠すための横幅 */
  height:1px; /* 視覚的に隠すための高さ */
  overflow:hidden; /* 表示領域からはみ出した内容を隠す */
  clip-path:inset(50%); /* チェックボックス本体を画面上から隠す */
  white-space:nowrap; /* 要素内の改行を防ぐ */
}

/* カード全体をクリック可能にするラベル */
.card-checkbox_label{
  position:relative; /* チェックマークをカード内へ配置する基準 */
  display:block; /* カードをブロック要素として表示 */
  min-height:170px; /* カードの最小高さ。値を大きくするとカードが縦に広がる */
  padding:24px 20px; /* 上下24px・左右20pxの内側余白。値を大きくすると内容との間隔が広がる */
  border:2px solid #dfe7f0; /* 未選択時の枠線の太さ・種類・色 */
  border-radius:16px; /* カードの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 未選択時のカード背景色 */
  color:#111827; /* カード内の基本文字色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さへ含める */
}

/* 選択状態を示すチェックマーク */
.card-checkbox_mark{
  position:absolute; /* チェックマークをカードの右上へ重ねて配置 */
  top:16px; /* カード上端から16px離して配置。値を大きくすると下へ移動する */
  right:16px; /* カード右端から16px離して配置。値を大きくすると左へ移動する */
  display:flex; /* チェックマークを中央配置するためにFlexboxを使用 */
  align-items:center; /* チェックマークを縦方向の中央へ配置 */
  justify-content:center; /* チェックマークを横方向の中央へ配置 */
  width:30px; /* 円形マークの横幅。値を大きくするとマークが大きくなる */
  height:30px; /* 円形マークの高さ。値を大きくするとマークが大きくなる */
  border:2px solid #cbd5e1; /* 未選択時の円形マークの枠線 */
  border-radius:50%; /* 円形マークを完全な丸型にする */
  background:#ffffff; /* 未選択時の円形マーク背景色 */
  color:transparent; /* 未選択時はチェックマークを透明にする */
  font-size:18px; /* チェックマークの文字サイズ。値を大きくするとレ点が大きくなる */
  font-weight:700; /* チェックマークを太く表示 */
  line-height:1; /* チェックマーク周囲の不要な行間を削除 */
  box-sizing:border-box; /* borderを横幅と高さへ含める */
}

/* カード内のアイコン */
.card-checkbox_icon{
  display:flex; /* アイコン文字を中央配置するためにFlexboxを使用 */
  align-items:center; /* アイコン文字を縦方向の中央へ配置 */
  justify-content:center; /* アイコン文字を横方向の中央へ配置 */
  width:48px; /* アイコン領域の横幅。値を大きくするとアイコン背景が大きくなる */
  height:48px; /* アイコン領域の高さ。値を大きくするとアイコン背景が大きくなる */
  margin:0 0 18px; /* 下側18pxの余白。値を大きくすると項目名との間隔が広がる */
  border-radius:12px; /* アイコン背景の角丸。値を大きくすると丸みが強くなる */
  background:#eaf2ff; /* アイコン背景の色 */
  color:#2563eb; /* アイコン文字の色 */
  font-size:24px; /* アイコン文字のサイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* アイコン文字を太字にする */
}

/* カードの項目名 */
.card-checkbox_name{
  margin:0 0 8px; /* 下側8pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* 項目名の文字色 */
  font-size:18px; /* 項目名の文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字にする */
  line-height:1.5; /* 項目名の行間。値を大きくすると行同士の間隔が広がる */
}

/* カードの説明文 */
.card-checkbox_description{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#64748b; /* 説明文の文字色 */
  font-size:14px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.7; /* 説明文の行間。値を大きくすると行同士の間隔が広がる */
}

/* 選択したカード */
.card-checkbox_input:checked
+ .card-checkbox_label{
  border-color:#2563eb; /* 選択中のカードへ青い枠線を表示 */
  background:#eaf2ff; /* 選択中のカード背景を薄い青色へ変更 */
}

/* 選択したカードのチェックマーク */
.card-checkbox_input:checked
+ .card-checkbox_label
.card-checkbox_mark{
  border-color:#2563eb; /* 選択時の円形マーク枠線を青色へ変更 */
  background:#2563eb; /* 選択時の円形マーク背景を青色へ変更 */
  color:#ffffff; /* 選択時のチェックマークを白色で表示 */
}

/* キーボード操作時のフォーカス表示 */
.card-checkbox_input:focus-visible
+ .card-checkbox_label{
  outline:3px solid #2563eb; /* 現在操作しているカードを示す青い外枠 */
  outline-offset:3px; /* 外枠をカードから3px離して表示 */
}

/* 画面幅720px以下 */
@media screen and (max-width:720px){

  /* タブレットではカードを2列で表示 */
  .card-checkbox_list{
    grid-template-columns:repeat(2,minmax(0,1fr)); /* 同じ横幅の2列へ変更 */
  }

}

/* 画面幅480px以下 */
@media screen and (max-width:480px){

  /* スマートフォン表示時のカード型チェックボックス全体 */
  .card-checkbox_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右を中央配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小して画面内へ収める */
  }

  /* スマートフォンではカードを1列で表示 */
  .card-checkbox_list{
    grid-template-columns:1fr; /* カードを横幅いっぱいの1列へ変更 */
  }

  /* スマートフォン表示時の各カード */
  .card-checkbox_label{
    min-height:auto; /* 内容量に合わせてカードの高さを自動調整 */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSSの2ファイルで構成されています。HTMLで3個のチェックボックスと、それぞれに対応するカードを配置し、CSSで通常のチェックボックス本体を視覚的に隠して、カード全体をクリックして選択できるデザインにしています。JavaScriptは使用せず、HTMLのチェックボックスが持つ選択状態とCSSの:checkedを利用して表示を切り替えます。

各チェックボックスのidとカード側のlabelのforを対応させることで、カードをクリックしたときにチェック状態を切り替えます。選択されたチェックボックスは.card-checkbox_input:checked + .card-checkbox_labelで判定し、カードの枠線と背景色、右上のチェックマークを変更して選択状態が分かるようにしています。

外部ライブラリや外部サービス、API、画像などは使用していません。カード内の「H」「C」「J」はHTML上の文字として表示しているため、アイコン画像などを別途用意する必要もありません。sampleフォルダ内のindex.htmlとstyle.cssを配置するだけで使用でき、画面幅に応じて3列・2列・1列へ切り替わるレスポンシブ対応もCSSだけで行っています。

sample/
├── index.html
└── style.css

各ファイルの役割
index.htmlは、HTML・CSS・JavaScriptの3個のチェックボックスと、それぞれに対応するカードを記述するファイルです。チェックボックスには個別のidを設定し、直後に配置したlabelのforへ同じ値を指定しています。カード内にはチェックマーク、アイコン文字、項目名、説明文を配置しています。

style.cssは、カードの3列レイアウト、背景色、枠線、角丸、アイコン、チェックマークなどのデザインを設定するファイルです。また、チェックボックスが選択されたときのカード表示を:checkedで変更し、キーボード操作時には:focus-visibleを利用して現在操作しているカードへフォーカス枠を表示します。

設置方法・使い方
sampleフォルダを作成し、その中へindex.htmlとstyle.cssを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">を使用してstyle.cssを読み込む構成になっています。2ファイルを配置したら、sample/index.htmlをブラウザで開きます。

初期状態では3枚のカードが未選択の状態で表示されます。選択したいカードをクリックすると、そのカードに対応するチェックボックスがチェックされ、カードの枠線と背景色が青系のデザインへ変化します。同時にカード右上の円形マークが青くなり、白いチェックマークが表示されます。もう一度同じカードをクリックするとチェックが解除され、未選択時のデザインへ戻ります。

複数のカードはそれぞれ独立したチェックボックスになっているため、HTML・CSS・JavaScriptなど複数の項目を同時に選択できます。JavaScriptによる選択処理は必要なく、チェックボックスとlabelの関連付け、CSSの:checkedによって動作します。

カードを追加する場合は、既存の.card-checkbox_inputと.card-checkbox_labelを1組として追加します。追加するチェックボックスには既存項目と重複しないidを設定し、直後のlabelのforへ同じ値を指定してください。項目に合わせてvalue、アイコン文字、項目名、説明文も変更します。

カスタマイズできる内容
index.htmlでは、カードの項目数、項目名、説明文、アイコンとして表示する文字、チェックボックスのnameとvalueを変更できます。チェックボックスのidを変更する場合は、対応するlabelのforも同じ値へ変更してください。

style.cssでは、カード全体の最大横幅、列数、カード同士の間隔、カードの高さ、内側余白、枠線、角丸、背景色、アイコンの大きさ、チェックマークの位置や大きさなどを変更できます。選択中のカードに使用する枠線や背景色も.card-checkbox_input:checked + .card-checkbox_labelから変更できます。

PC表示時の列数を変更する場合は、grid-template-columns:repeat(3,minmax(0,1fr))の3を変更します。たとえばrepeat(2,minmax(0,1fr))にすると、通常時から2列で表示できます。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右を表します。値を大きくすると画面端との間隔が広がります。

max-width:900px;
カード型チェックボックス全体の最大横幅です。値を大きくするとカード一覧を横方向へ広く表示でき、小さくすると全体がコンパクトになります。

margin:40px auto;
カード型チェックボックス全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
カード型チェックボックス全体の内側余白です。値を大きくすると外枠と内容との間隔が広がります。

border:1px solid #dfe7f0;
カード型チェックボックス全体の枠線です。1pxを大きくすると枠線が太くなります。

border-radius:18px;
カード型チェックボックス全体の角丸です。値を大きくすると丸みが強くなります。

margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとカード一覧との間隔が広がります。

font-size:16px;
全体上部にある説明文の文字サイズです。値を大きくすると文字が大きく表示されます。

grid-template-columns:repeat(3,minmax(0,1fr));
PC表示時のカードの列数です。3によって同じ横幅の3列を作り、3枚のカードを横並びで表示します。

gap:16px;
カード同士の縦横の間隔です。値を大きくするとカード間の余白が広がります。

width:1px;・height:1px;
本来のチェックボックスを視覚的に隠すために設定している大きさです。この値はカードの見た目を調整するためのサイズではないため、基本的には変更する必要はありません。

min-height:170px;
各カードの最小高さです。値を大きくするとカードが縦方向へ高くなります。

padding:24px 20px;
各カードの内側余白です。24pxが上下、20pxが左右を表します。値を大きくするとカードの枠線と内容との間隔が広がります。

border:2px solid #dfe7f0;
未選択時のカードの枠線です。2pxを大きくするとカードの枠線が太くなります。

border-radius:16px;
各カードの角丸です。値を大きくするとカードの丸みが強くなります。

top:16px;・right:16px;
カード右上に表示する円形チェックマークの位置です。topを大きくすると下方向へ、rightを大きくすると左方向へ移動します。

width:30px;・height:30px;
円形チェックマークの大きさです。値を大きくすると円が大きくなります。

font-size:18px;
円形マーク内に表示する「✓」の文字サイズです。値を大きくするとチェックマークが大きくなります。

width:48px;・height:48px;
「H」「C」「J」を表示するアイコン領域の大きさです。値を大きくするとアイコン背景も大きくなります。

margin:0 0 18px;
アイコン領域の下側余白です。18pxを大きくするとアイコンと項目名との間隔が広がります。

border-radius:12px;
アイコン背景の角丸です。値を大きくすると丸みが強くなります。

font-size:24px;
アイコンとして表示している「H」「C」「J」の文字サイズです。値を大きくすると文字が大きくなります。

margin:0 0 8px;
カードの項目名の下側余白です。8pxを大きくすると項目名と説明文との間隔が広がります。

font-size:18px;
カードの項目名の文字サイズです。値を大きくすると項目名が大きく表示されます。

font-size:14px;
カード内の説明文の文字サイズです。値を大きくすると説明文が大きく表示されます。

line-height:1.7;
カード内の説明文の行間です。値を大きくすると複数行になったときの行間が広がります。

outline:3px solid #2563eb;
キーボード操作でチェックボックスへフォーカスしたときにカードへ表示する外枠です。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:3px;
カードとフォーカス枠との間隔です。値を大きくするとフォーカス枠がカードの外側へ離れます。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。通常はgrid-template-columns:repeat(3,minmax(0,1fr))によって3枚のカードを横3列で表示します。

画面幅720px以下では@media screen and (max-width:720px)を使用し、grid-template-columns:repeat(2,minmax(0,1fr))へ変更します。これによりカードが2列になり、3枚目のカードは次の行へ配置されます。

画面幅480px以下では@media screen and (max-width:480px)を使用し、grid-template-columns:1frへ変更します。カードは横幅いっぱいの1列になり、3枚のカードが縦方向へ順番に表示されます。

同じ画面幅でカード型チェックボックス全体の上下余白を24px、内側余白を24px 18pxへ縮小します。また、各カードのmin-heightをautoへ変更し、固定した最小高さではなくカード内の内容量に合わせて高さが決まるようにしています。