カード型ラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

カード型ラジオボタンを作る方法

カード型ラジオボタンを作る方法を紹介します。通常のラジオボタンをカードデザインで表示し、選択中の項目だけ背景色や枠線が変化する見やすいUIをHTMLとCSSだけで実装します。JavaScriptを使用しないため、そのままブラウザで動作を確認できます。

選択肢をカードとして大きく表示できるため、プラン選択や配送方法、支払い方法、デザインテーマの選択など、クリックしやすさと視認性を重視した入力フォームに適しています。選択状態が一目で分かるため、管理画面やお問い合わせフォーム、会員サイトなど幅広いWebサイトで利用できます。

サンプルではカード型ラジオボタンの基本的な実装を紹介しています。カード内の文字、色、枠線、角丸、余白、カードサイズ、選択時の配色などはCSSから自由に変更できるため、サイトデザインに合わせてカスタマイズしやすい構成になっています。

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

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

デモ

好きな言語を選択

カードをクリックすると選択状態が切り替わります。

💻

HTML

マークアップ

🎨

CSS

デザイン

⚙️

JavaScript

動きを追加

🐘

PHP

サーバー処理

🐍

Python

データ処理

🗄️

SQL

データベース

選択中のカードだけ色が変化し、常に1つだけ選択できます。

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

<!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-radio-button_demo_wrap">

    <!-- 選択エリアのタイトル -->
    <div class="card-radio-button_demo_title">
      好きな言語を選択
    </div>

    <!-- 操作方法を案内する説明文 -->
    <p class="card-radio-button_demo_text">
      カードをクリックすると選択状態が切り替わります。
    </p>

    <!-- 6つのカード型ラジオボタン一覧 -->
    <div class="card-radio-button_demo_list">

      <!-- HTMLの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- HTMLを選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-html"
          type="radio"
          name="card-language"
          value="html">

        <!-- HTMLのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-html">

          <!-- HTMLカードのアイコン -->
          <div class="card-radio-button_demo_icon">💻</div>

          <!-- HTMLカードの項目名 -->
          <div class="card-radio-button_demo_name">HTML</div>

          <!-- HTMLカードの説明 -->
          <div class="card-radio-button_demo_desc">マークアップ</div>

        </label>

      </div>

      <!-- CSSの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- CSSを選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-css"
          type="radio"
          name="card-language"
          value="css">

        <!-- CSSのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-css">

          <!-- CSSカードのアイコン -->
          <div class="card-radio-button_demo_icon">🎨</div>

          <!-- CSSカードの項目名 -->
          <div class="card-radio-button_demo_name">CSS</div>

          <!-- CSSカードの説明 -->
          <div class="card-radio-button_demo_desc">デザイン</div>

        </label>

      </div>

      <!-- JavaScriptの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- JavaScriptを初期選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-javascript"
          type="radio"
          name="card-language"
          value="javascript"
          checked>

        <!-- JavaScriptのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-javascript">

          <!-- JavaScriptカードのアイコン -->
          <div class="card-radio-button_demo_icon">⚙️</div>

          <!-- JavaScriptカードの項目名 -->
          <div class="card-radio-button_demo_name">JavaScript</div>

          <!-- JavaScriptカードの説明 -->
          <div class="card-radio-button_demo_desc">動きを追加</div>

        </label>

      </div>

      <!-- PHPの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- PHPを選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-php"
          type="radio"
          name="card-language"
          value="php">

        <!-- PHPのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-php">

          <!-- PHPカードのアイコン -->
          <div class="card-radio-button_demo_icon">🐘</div>

          <!-- PHPカードの項目名 -->
          <div class="card-radio-button_demo_name">PHP</div>

          <!-- PHPカードの説明 -->
          <div class="card-radio-button_demo_desc">サーバー処理</div>

        </label>

      </div>

      <!-- Pythonの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- Pythonを選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-python"
          type="radio"
          name="card-language"
          value="python">

        <!-- Pythonのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-python">

          <!-- Pythonカードのアイコン -->
          <div class="card-radio-button_demo_icon">🐍</div>

          <!-- Pythonカードの項目名 -->
          <div class="card-radio-button_demo_name">Python</div>

          <!-- Pythonカードの説明 -->
          <div class="card-radio-button_demo_desc">データ処理</div>

        </label>

      </div>

      <!-- SQLの選択カード -->
      <div class="card-radio-button_demo_item">

        <!-- SQLを選択するラジオボタン -->
        <input
          class="card-radio-button_demo_input"
          id="card-radio-sql"
          type="radio"
          name="card-language"
          value="sql">

        <!-- SQLのカード型ラベル -->
        <label class="card-radio-button_demo_label" for="card-radio-sql">

          <!-- SQLカードのアイコン -->
          <div class="card-radio-button_demo_icon">🗄️</div>

          <!-- SQLカードの項目名 -->
          <div class="card-radio-button_demo_name">SQL</div>

          <!-- SQLカードの説明 -->
          <div class="card-radio-button_demo_desc">データベース</div>

        </label>

      </div>

    </div>

    <!-- 選択動作を案内する補足文 -->
    <p class="card-radio-button_demo_note">
      選択中のカードだけ色が変化し、常に1つだけ選択できます。
    </p>

  </div>

</body>
</html>

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

/* ========================================
   カード型ラジオボタン全体
======================================== */
.card-radio-button_demo_wrap{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  max-width:900px; /* 全体の最大横幅。900pxを大きくすると表示領域が広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右を中央配置 */
  padding:32px; /* 全体の内側余白。32pxを大きくすると内容との間隔が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む1pxの枠線 */
  border-radius:18px; /* 全体の角丸。18pxを大きくすると丸みが強くなる */
  background:#f8fafc; /* カード型ラジオボタン全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

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

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

/* ========================================
   カード型ラジオボタン一覧
======================================== */
.card-radio-button_demo_list{
  display:grid; /* 各選択カードをグリッドで配置 */
  grid-template-columns:repeat(3,1fr); /* 同じ横幅の3列で表示し、6枚を2行に並べる */
  gap:20px; /* カード同士の縦横間隔。20pxを大きくすると間隔が広がる */
}

/* ========================================
   各選択項目
======================================== */
.card-radio-button_demo_item{
  min-width:0; /* 長い文字があってもグリッド幅を超えないようにする */
}

/* ========================================
   ラジオボタン本体
======================================== */
.card-radio-button_demo_input{
  position:absolute; /* 表示領域から外してカードだけを画面へ表示 */
  width:1px; /* 操作可能な状態を維持しながら横幅を最小化 */
  height:1px; /* 操作可能な状態を維持しながら高さを最小化 */
  margin:-1px; /* 表示領域からはみ出さないよう位置を調整 */
  padding:0; /* 内側余白を削除 */
  overflow:hidden; /* ラジオボタン本体を画面へ表示しない */
  clip:rect(0,0,0,0); /* ラジオボタン本体の表示範囲を切り取る */
  white-space:nowrap; /* 要素内で改行しない */
  border:0; /* 標準の枠線を削除 */
}

/* ========================================
   カード型ラベル
======================================== */
.card-radio-button_demo_label{
  display:block; /* カード全体をブロック要素として表示 */
  height:100%; /* 同じ行のカードの高さを揃える */
  padding:22px; /* カードの内側余白。22pxを大きくするとカード内の余白が広がる */
  border:2px solid #d9e2ef; /* 未選択時の枠線の太さ・種類・色 */
  border-radius:16px; /* カードの角丸。16pxを大きくすると丸みが強くなる */
  background:#ffffff; /* 未選択時のカード背景色 */
  text-align:center; /* カード内の内容を中央揃えにする */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さに含める */
  transition:background .3s, border-color .3s, color .3s; /* 0.3秒で色を切り替える。値を大きくするとゆっくり変化する */
}

/* ========================================
   カード内のアイコン
======================================== */
.card-radio-button_demo_icon{
  margin-bottom:12px; /* 下側12pxの余白。値を大きくすると項目名との間隔が広がる */
  font-size:42px; /* アイコンの文字サイズ。42pxを大きくするとアイコンが大きくなる */
  line-height:1; /* アイコン周辺の余分な行間を抑える */
}

/* ========================================
   カード内の項目名
======================================== */
.card-radio-button_demo_name{
  color:#111827; /* 未選択時の項目名の文字色 */
  font-size:20px; /* 項目名の文字サイズ。20pxを大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字で表示 */
  line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
}

/* ========================================
   カード内の説明
======================================== */
.card-radio-button_demo_desc{
  margin-top:8px; /* 上側8pxの余白。値を大きくすると項目名との間隔が広がる */
  color:#64748b; /* 未選択時の説明文の文字色 */
  font-size:14px; /* 説明文の文字サイズ。14pxを大きくすると文字が大きくなる */
  line-height:1.6; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* ========================================
   選択中のカード
======================================== */
.card-radio-button_demo_input:checked + .card-radio-button_demo_label{
  border-color:#2563eb; /* 選択中のカード枠線色 */
  background:#2563eb; /* 選択中のカード背景色 */
}

/* ========================================
   選択中の項目名と説明
======================================== */
.card-radio-button_demo_input:checked + .card-radio-button_demo_label .card-radio-button_demo_name,
.card-radio-button_demo_input:checked + .card-radio-button_demo_label .card-radio-button_demo_desc{
  color:#ffffff; /* 選択中の項目名と説明文を白色に変更 */
}

/* ========================================
   キーボード操作時のフォーカス表示
======================================== */
.card-radio-button_demo_input:focus-visible + .card-radio-button_demo_label{
  outline:3px solid rgba(37,99,235,.25); /* フォーカス時に表示する3pxの外枠 */
  outline-offset:3px; /* カードと外枠の間隔。3pxを大きくすると間隔が広がる */
}

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

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

  /* タブレットでは2列表示へ変更 */
  .card-radio-button_demo_list{
    grid-template-columns:repeat(2,1fr); /* 3列から2列へ切り替える */
  }

}

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

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小して表示領域を確保 */
  }

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

  /* スマートフォンでは1列表示へ変更 */
  .card-radio-button_demo_list{
    grid-template-columns:1fr; /* 2列から1列へ切り替える */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成された、カード型ラジオボタンのサンプルです。HTMLでラジオボタンとカードの構造を作成し、CSSでカードデザインや選択時の色変更、レイアウトを設定しています。JavaScriptを使用せず、標準のラジオボタンだけで常に1つだけ選択できるカード型UIを実装しています。

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

各ファイルの役割
index.html
カード型ラジオボタンのHTMLを記述しています。カードの追加・削除、表示する項目名や説明文、初期選択する項目を変更できます。

style.css
カードの色、サイズ、余白、角丸、枠線、文字サイズ、選択時の背景色や文字色、レスポンシブレイアウトを設定しています。

設置方法・使い方
sampleフォルダ内へindex.htmlとstyle.cssを配置してください。
配置後はsample/index.htmlをブラウザで開くだけで利用できます。
カードをクリックすると選択状態が切り替わり、常に1つだけ選択されます。

カスタマイズできる内容
index.htmlではカードの項目名、説明文、アイコン、カード数、初期選択する項目を変更できます。
style.cssではカードの背景色、選択時の色、文字色、枠線、余白、角丸、カードサイズ、カード間隔、文字サイズなどを自由に調整できます。

数値調整
style.css
max-width:900px;
サンプル全体の最大横幅です。値を大きくすると表示領域が広くなります。

style.css
grid-template-columns:repeat(3,1fr);
PCで表示する列数です。値を変更すると1行に表示するカード数が変わります。

style.css
gap:20px;
カード同士の間隔です。値を大きくすると余白が広くなります。

style.css
padding:22px;
カード内の余白です。値を変更するとカードの大きさや余白が変わります。

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

レスポンシブ対応
style.cssのmedia queryでレスポンシブ対応しています。PCでは3列表示、タブレットでは2列表示、スマートフォンでは1列表示へ自動で切り替わります。また、width:100%、max-width、paddingを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく快適に利用できます。