画像クリックで選択できるラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

画像クリックで選択できるチェックボックスを作る方法

画像クリックで選択できるチェックボックスをHTMLとCSSだけで作る方法を紹介します。通常のチェックボックスではなく、画像全体をクリックして複数の項目を選択できるUIです。選択した画像には青い枠線とチェックマークが表示されるため、現在の選択状態をひと目で確認できます。

このサンプルでは、画像の取得先としてPicsum Photosを使用し、6枚の画像をカード状に並べています。各画像とチェックボックスをlabel要素で関連付けているため、画像のどこをクリックしても選択状態を切り替えられます。JavaScriptや外部ライブラリを使用せず、HTMLとCSSだけで複数選択に対応しています。

ECサイトの商品画像選択、会員サイトの興味カテゴリー設定、アンケートフォーム、管理画面の画像分類など、文字だけでは内容を判断しにくい選択項目に利用できます。HTMLでは画像URLや選択肢の数、初期選択を変更でき、CSSではカードの大きさ、列数、余白、角丸、選択色を調整できます。画面幅に応じて3列、2列、1列へ切り替わるため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

好きな画像を選択

画像をクリックすると選択状態が切り替わります。

山

海

森

街

道路

自然

選択中の画像カードだけ枠線と背景色が変わり、常に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>

  <!-- 同じsampleフォルダ内に配置したstyle.cssを読み込む -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 画像クリックで選択できるラジオボタン全体 -->
  <div class="image-select-radio-button_wrap">

    <!-- 選択エリアのタイトル。用途に合わせて文章を変更可能 -->
    <div class="image-select-radio-button_title">
      好きな画像を選択
    </div>

    <!-- 操作方法を案内する説明文。用途に合わせて文章を変更可能 -->
    <p class="image-select-radio-button_text">
      画像をクリックすると選択状態が切り替わります。
    </p>

    <!-- 6つの画像選択ラジオボタン一覧 -->
    <div class="image-select-radio-button_list">

      <!-- 画像1の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像1を選択するラジオボタン

          id:
          このラジオボタン専用の重複しないIDを指定する。
          下にあるlabelのfor属性にも同じ文字列を指定する。

          name:
          6個すべてに同じ名前を指定することで、1つだけ選択できる。
          別のラジオボタングループと分けたい場合は、この6個すべてを同じ別名へ変更する。

          value:
          フォーム送信時に送信する値を指定する。
          image1の部分は、用途に合った半角英数字へ変更する。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_1"
          type="radio"
          name="selected-image"
          value="image1">

        <!--
          画像1をクリック可能にするラベル

          for:
          上のinputに指定したidと同じ文字列を入力する。
          値が一致していない場合、画像をクリックしても選択されない。
        -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_1">

          <!--
            画像1を表示するimg要素

            src:
            表示したい画像ファイルの場所を入力する。
            sample/images/image1.jpgへ画像を置く場合は、
            src="images/image1.jpg"
            と入力する。

            外部サイトの画像URLを使う場合は、
            src="https://example.com/images/image1.jpg"
            のように画像の完全なURLを入力する。

            alt:
            画像の内容を説明する文章を入力する。
            画像が表示できない場合や、音声読み上げ時に使用される。
            「画像1」ではなく、「山と湖の風景」のように具体的に入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image1.jpg"
            alt="画像1の内容を説明する文章">

          <!-- 画像1の下に表示する項目名。用途に合わせて変更可能 -->
          <span class="image-select-radio-button_name">
            画像1
          </span>

        </label>

      </div>

      <!-- 画像2の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像2を選択するラジオボタン
          idとlabelのforは同じ文字列にする。
          valueはフォーム送信時に使用する値へ変更する。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_2"
          type="radio"
          name="selected-image"
          value="image2">

        <!-- forには上のinputと同じidを指定する -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_2">

          <!--
            srcには画像2の保存場所または画像URLを入力する。
            sample/images/image2.jpgを使う場合は、
            src="images/image2.jpg"
            と入力する。

            altには画像2の内容が分かる具体的な説明を入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image2.jpg"
            alt="画像2の内容を説明する文章">

          <!-- 画像2の下に表示する項目名 -->
          <span class="image-select-radio-button_name">
            画像2
          </span>

        </label>

      </div>

      <!-- 画像3の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像3を選択するラジオボタン
          初期選択は設定していないため、ページ表示時はどれも未選択になる。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_3"
          type="radio"
          name="selected-image"
          value="image3">

        <!-- forには上のinputと同じidを指定する -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_3">

          <!--
            srcには画像3の保存場所または画像URLを入力する。
            sample/images/image3.jpgを使う場合は、
            src="images/image3.jpg"
            と入力する。

            altには画像3の内容が分かる具体的な説明を入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image3.jpg"
            alt="画像3の内容を説明する文章">

          <!-- 画像3の下に表示する項目名 -->
          <span class="image-select-radio-button_name">
            画像3
          </span>

        </label>

      </div>

      <!-- 画像4の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像4を選択するラジオボタン
          idとlabelのforは同じ文字列にする。
          valueはフォーム送信時に使用する値へ変更する。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_4"
          type="radio"
          name="selected-image"
          value="image4">

        <!-- forには上のinputと同じidを指定する -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_4">

          <!--
            srcには画像4の保存場所または画像URLを入力する。
            sample/images/image4.jpgを使う場合は、
            src="images/image4.jpg"
            と入力する。

            altには画像4の内容が分かる具体的な説明を入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image4.jpg"
            alt="画像4の内容を説明する文章">

          <!-- 画像4の下に表示する項目名 -->
          <span class="image-select-radio-button_name">
            画像4
          </span>

        </label>

      </div>

      <!-- 画像5の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像5を選択するラジオボタン
          idとlabelのforは同じ文字列にする。
          valueはフォーム送信時に使用する値へ変更する。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_5"
          type="radio"
          name="selected-image"
          value="image5">

        <!-- forには上のinputと同じidを指定する -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_5">

          <!--
            srcには画像5の保存場所または画像URLを入力する。
            sample/images/image5.jpgを使う場合は、
            src="images/image5.jpg"
            と入力する。

            altには画像5の内容が分かる具体的な説明を入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image5.jpg"
            alt="画像5の内容を説明する文章">

          <!-- 画像5の下に表示する項目名 -->
          <span class="image-select-radio-button_name">
            画像5
          </span>

        </label>

      </div>

      <!-- 画像6の選択項目 -->
      <div class="image-select-radio-button_item">

        <!--
          画像6を選択するラジオボタン
          idとlabelのforは同じ文字列にする。
          valueはフォーム送信時に使用する値へ変更する。
        -->
        <input
          class="image-select-radio-button_input"
          id="image-select-radio-button_6"
          type="radio"
          name="selected-image"
          value="image6">

        <!-- forには上のinputと同じidを指定する -->
        <label
          class="image-select-radio-button_label"
          for="image-select-radio-button_6">

          <!--
            srcには画像6の保存場所または画像URLを入力する。
            sample/images/image6.jpgを使う場合は、
            src="images/image6.jpg"
            と入力する。

            altには画像6の内容が分かる具体的な説明を入力する。
          -->
          <img
            class="image-select-radio-button_image"
            src="images/image6.jpg"
            alt="画像6の内容を説明する文章">

          <!-- 画像6の下に表示する項目名 -->
          <span class="image-select-radio-button_name">
            画像6
          </span>

        </label>

      </div>

    </div>

    <!-- 選択状態を案内する補足文。用途に合わせて文章を変更可能 -->
    <p class="image-select-radio-button_note">
      選択中の画像カードだけ枠線と背景色が変わり、常に1つだけ選択できます。
    </p>

  </div>

</body>
</html>

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

/* ========================================
   画像選択ラジオボタン全体
======================================== */
.image-select-radio-button_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を横幅に含める */
}

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

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

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

/* ========================================
   各画像選択項目
======================================== */
.image-select-radio-button_item{
  min-width:0; /* 長い内容があってもグリッド幅を超えないようにする */
}

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

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

/* ========================================
   カード内の画像
======================================== */
.image-select-radio-button_image{
  display:block; /* 画像下に不要な隙間ができないようブロック表示 */
  width:100%; /* カードの横幅いっぱいに表示 */
  aspect-ratio:4 / 3; /* 画像を横4・縦3の比率で表示 */
  border-radius:10px; /* 画像の角丸。10pxを大きくすると丸みが強くなる */
  object-fit:cover; /* 画像比率を保ちながら表示領域全体を埋める */
}

/* ========================================
   画像の項目名
======================================== */
.image-select-radio-button_name{
  display:block; /* 項目名を画像の下へ表示 */
  padding:14px 8px 6px; /* 上14px・左右8px・下6pxの余白。値を変更すると文字周辺の余白が変わる */
  color:#111827; /* 未選択時の項目名の文字色 */
  font-size:17px; /* 項目名の文字サイズ。17pxを大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字で表示 */
  line-height:1.5; /* 項目名の行間。値を大きくすると行間が広がる */
  text-align:center; /* 項目名を中央揃えにする */
}

/* ========================================
   選択中の画像カード
======================================== */
.image-select-radio-button_input:checked + .image-select-radio-button_label{
  border-color:#2563eb; /* 選択中のカード枠線色 */
  background:#eaf2ff; /* 選択中のカード背景色 */
  transform:translateY(-4px); /* 選択中のカードを上へ4px移動。値を大きくすると浮き上がる量が増える */
}

/* ========================================
   選択中の項目名
======================================== */
.image-select-radio-button_input:checked + .image-select-radio-button_label .image-select-radio-button_name{
  color:#1d4ed8; /* 選択中の項目名の文字色 */
}

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

/* ========================================
   補足文
======================================== */
.image-select-radio-button_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列表示へ変更 */
  .image-select-radio-button_list{
    grid-template-columns:repeat(2,1fr); /* 3列から2列へ切り替える */
  }

}

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

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

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

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

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されており、画像をクリックして選択できるラジオボタンを作成できます。画像ファイルはsample/imagesフォルダへ配置して利用する構成です。HTMLでは画像や選択肢を管理し、CSSではカードデザインや選択時の装飾、レスポンシブ表示を設定しています。JavaScriptを使用しないため、シンプルな構成で導入やカスタマイズが行えます。

sample/
├── index.html
├── style.css
└── images/
    ├── image1.jpg
    ├── image2.jpg
    ├── image3.jpg
    ├── image4.jpg
    ├── image5.jpg
    └── image6.jpg

各ファイルの役割
index.htmlは画像付きラジオボタンの構造を管理します。画像ファイルのパス（src）、画像説明（alt）、表示するタイトル、ラジオボタンのvalueなどを編集できます。

style.cssはカードデザイン、画像サイズ、枠線、背景色、文字サイズ、余白、選択時の装飾、レスポンシブ表示など見た目を管理します。

imagesフォルダには表示したい画像ファイルを保存します。HTMLのsrc属性へ指定した画像ファイル名と一致させることで表示できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、imagesフォルダを作成して画像ファイルを保存します。HTML内のsrc属性へ保存した画像ファイル名を指定したら、sample/index.htmlをブラウザで開くだけで利用できます。画像をクリックすると対応するラジオボタンが選択され、常に1つだけ選択できます。

カスタマイズできる内容
index.htmlでは画像ファイル、画像URL、alt属性、項目名、タイトル、説明文、選択肢の追加・削除、value属性を変更できます。style.cssではカードサイズ、画像サイズ、背景色、枠線、文字色、角丸、余白、カード間隔、選択時の色などを自由に調整できます。

数値調整
style.cssのmax-widthは全体の最大横幅です。値を変更すると全体の表示幅が変わります。
gapはカード同士の間隔です。値を変更するとカード間の余白が変わります。
paddingはカード内側の余白です。値を変更すると画像や文字との余白が変わります。
border-radiusはカードや画像の角丸です。値を変更すると丸みが変わります。
transform: translateY()は選択時にカードが浮き上がる距離です。値を変更すると移動量が変わります。
transition:0.3s;はアニメーション時間です。0.3秒で切り替わり、値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
style.cssではmedia queryを使用し、画面幅に応じてカードの列数やレイアウトを自動調整します。また、画像はwidth:100%で表示されるため、スマートフォン・タブレット・PCでもレイアウトが崩れず利用できます。