いろいろな形のラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

いろいろな形のラジオボタンを作る方法

いろいろな形のラジオボタンを作る方法を紹介します。標準的な丸いラジオボタンだけでなく、四角形や角丸、ボタン風、カード風など、見た目の異なるラジオボタンをHTMLとCSSだけで実装できるサンプルです。JavaScriptを使用しないため、シンプルな構成で導入できます。

このサンプルでは、それぞれ異なるデザインのラジオボタンを1つの画面で比較しながら確認できます。お問い合わせフォームや設定画面、会員登録画面、ECサイトの商品オプション選択など、デザインや用途に応じて最適なラジオボタンを選びたい場面で役立ちます。すべてラジオボタン本来の動作を利用しており、常に1つだけ選択できる仕様です。

各ラジオボタンの色、サイズ、角丸、余白、枠線などはCSSから自由に変更できます。サイトデザインに合わせて見た目を調整しやすく、さまざまなフォームへ応用できるサンプルとして活用できます。

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

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

デモ

いろいろな形のラジオボタン

形の異なるラジオボタンをクリックして選択してください。

丸型

選択肢

四角型

選択肢

角丸型

選択肢

ひし形

選択肢

横長型

選択肢

二重丸型

選択肢

常に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フォルダ内のCSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- いろいろな形のラジオボタン全体 -->
  <div class="various-radio-button-shapes_wrap">

    <!-- ラジオボタンエリアのタイトル -->
    <div class="various-radio-button-shapes_title">
      いろいろな形のラジオボタン
    </div>

    <!-- 操作方法を案内する説明文 -->
    <p class="various-radio-button-shapes_text">
      形の異なる選択肢から1つだけ選択できます。
    </p>

    <!-- 6種類のラジオボタン一覧 -->
    <div class="various-radio-button-shapes_list">

      <!-- 丸型ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          丸型
        </div>

        <!--
          丸型の選択項目

          name属性は6項目すべて同じ値にする。
          同じname属性を使用することで、常に1つだけ選択できる。
        -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--round">

          <!--
            value属性にはフォーム送信時に使用する値を指定する。
            用途に合わせてroundの部分を変更可能。
          -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="round">

          <!-- 丸型の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

      <!-- 四角型ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          四角型
        </div>

        <!-- 四角型の選択項目 -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--square">

          <!-- value属性は用途に合わせて変更可能 -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="square">

          <!-- 四角型の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

      <!-- 角丸型ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          角丸型
        </div>

        <!-- 角丸型の選択項目 -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--rounded">

          <!-- value属性は用途に合わせて変更可能 -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="rounded">

          <!-- 角丸型の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

      <!-- ひし形ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          ひし形
        </div>

        <!-- ひし形の選択項目 -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--diamond">

          <!-- value属性は用途に合わせて変更可能 -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="diamond">

          <!-- ひし形の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

      <!-- 横長型ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          横長型
        </div>

        <!-- 横長型の選択項目 -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--wide">

          <!-- value属性は用途に合わせて変更可能 -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="wide">

          <!-- 横長型の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

      <!-- 二重丸型ラジオボタン -->
      <div class="various-radio-button-shapes_item">

        <!-- デザイン名 -->
        <div class="various-radio-button-shapes_name">
          二重丸型
        </div>

        <!-- 二重丸型の選択項目 -->
        <label class="various-radio-button-shapes_option various-radio-button-shapes_option--double">

          <!-- value属性は用途に合わせて変更可能 -->
          <input
            class="various-radio-button-shapes_input"
            type="radio"
            name="radio-shape"
            value="double">

          <!-- 二重丸型の選択マーク -->
          <span class="various-radio-button-shapes_mark"></span>

          <!-- 画面に表示する項目名 -->
          <span class="various-radio-button-shapes_label">
            選択肢
          </span>

        </label>

      </div>

    </div>

    <!-- ラジオボタンの動作を案内する補足文 -->
    <p class="various-radio-button-shapes_note">
      各項目をクリックすると選択が切り替わり、常に1つだけ選択されます。
    </p>

  </div>

</body>
</html>

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

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

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

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

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

/* ========================================
   各ラジオボタン項目
======================================== */
.various-radio-button-shapes_item{
  min-width:0; /* 内容がグリッド列の横幅を超えないようにする */
  padding:20px; /* 項目の内側余白。20pxを大きくするとカードが広くなる */
  border:1px solid #dbe5f1; /* 項目を囲む1pxの枠線 */
  border-radius:14px; /* 項目の角丸。14pxを大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* ========================================
   デザイン名
======================================== */
.various-radio-button-shapes_name{
  margin:0 0 16px; /* 下側16pxの余白。値を大きくすると選択項目との間隔が広がる */
  color:#334155; /* デザイン名の文字色 */
  font-size:16px; /* デザイン名の文字サイズ。16pxを大きくすると文字が大きくなる */
  font-weight:700; /* デザイン名を太字で表示 */
  line-height:1.5; /* デザイン名の行間 */
}

/* ========================================
   選択項目全体
======================================== */
.various-radio-button-shapes_option{
  display:flex; /* 選択マークと項目名を横並びにする */
  align-items:center; /* 選択マークと文字を縦方向の中央へ揃える */
  gap:12px; /* 選択マークと文字の間隔。12pxを大きくすると間隔が広がる */
  min-height:48px; /* クリック領域の最小高さ。48pxを大きくすると高さが増える */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

/* ========================================
   共通の選択マーク
======================================== */
.various-radio-button-shapes_mark{
  position:relative; /* 内側の選択マークを配置する基準 */
  display:block; /* 幅と高さを適用できるようにする */
  width:24px; /* 選択マークの横幅。24pxを大きくすると横方向へ大きくなる */
  height:24px; /* 選択マークの高さ。24pxを大きくすると縦方向へ大きくなる */
  border:2px solid #2563eb; /* 選択マークを囲む枠線 */
  background:#ffffff; /* 未選択時の背景色 */
  flex-shrink:0; /* 横幅が狭くても選択マークを縮めない */
  box-sizing:border-box; /* borderを幅と高さに含める */
}

/* ========================================
   共通の選択済みマーク
======================================== */
.various-radio-button-shapes_mark::after{
  content:""; /* 選択済み状態を示す内側マークを作成 */
  position:absolute; /* 外側マーク内へ配置 */
  top:50%; /* 上端を中央へ移動 */
  left:50%; /* 左端を中央へ移動 */
  width:10px; /* 内側マークの横幅。10pxを大きくすると選択表示が大きくなる */
  height:10px; /* 内側マークの高さ。10pxを大きくすると選択表示が大きくなる */
  background:#2563eb; /* 選択済みを示す色 */
  opacity:0; /* 未選択時は内側マークを非表示 */
  transform:translate(-50%,-50%) scale(0); /* 未選択時は中央で縮小 */
  transition:opacity .2s, transform .2s; /* 0.2秒で選択表示を切り替える。値を大きくするとゆっくり変化する */
}

/* ========================================
   選択済み状態
======================================== */
.various-radio-button-shapes_input:checked + .various-radio-button-shapes_mark::after{
  opacity:1; /* 選択時に内側マークを表示 */
  transform:translate(-50%,-50%) scale(1); /* 選択時に通常サイズへ拡大 */
}

/* ========================================
   項目名
======================================== */
.various-radio-button-shapes_label{
  color:#111827; /* 項目名の文字色 */
  font-size:17px; /* 項目名の文字サイズ。17pxを大きくすると文字が大きくなる */
  font-weight:700; /* 項目名を太字で表示 */
  line-height:1.5; /* 項目名の行間 */
}

/* ========================================
   丸型
======================================== */
.various-radio-button-shapes_option--round .various-radio-button-shapes_mark,
.various-radio-button-shapes_option--round .various-radio-button-shapes_mark::after{
  border-radius:50%; /* 外側と内側を完全な円形にする */
}

/* ========================================
   四角型
======================================== */
.various-radio-button-shapes_option--square .various-radio-button-shapes_mark,
.various-radio-button-shapes_option--square .various-radio-button-shapes_mark::after{
  border-radius:0; /* 外側と内側の角丸を削除して四角形にする */
}

/* ========================================
   角丸型
======================================== */
.various-radio-button-shapes_option--rounded .various-radio-button-shapes_mark{
  border-radius:7px; /* 外側の角丸。7pxを大きくすると丸みが強くなる */
}

.various-radio-button-shapes_option--rounded .various-radio-button-shapes_mark::after{
  border-radius:3px; /* 内側の角丸。3pxを大きくすると丸みが強くなる */
}

/* ========================================
   ひし形
======================================== */
.various-radio-button-shapes_option--diamond .various-radio-button-shapes_mark{
  transform:rotate(45deg); /* 外側を45度回転してひし形にする */
}

.various-radio-button-shapes_option--diamond .various-radio-button-shapes_mark::after{
  transform:translate(-50%,-50%) rotate(0deg) scale(0); /* 未選択時の内側マークを縮小 */
}

.various-radio-button-shapes_option--diamond .various-radio-button-shapes_input:checked + .various-radio-button-shapes_mark::after{
  transform:translate(-50%,-50%) rotate(0deg) scale(1); /* 選択時に内側マークを表示 */
}

/* ========================================
   横長型
======================================== */
.various-radio-button-shapes_option--wide .various-radio-button-shapes_mark{
  width:38px; /* 横長型の横幅。38pxを大きくするとさらに横長になる */
  border-radius:999px; /* 両端を丸くしてカプセル型にする */
}

.various-radio-button-shapes_option--wide .various-radio-button-shapes_mark::after{
  width:22px; /* 横長型の内側マークの横幅 */
  border-radius:999px; /* 内側マークも横長のカプセル型にする */
}

/* ========================================
   二重丸型
======================================== */
.various-radio-button-shapes_option--double .various-radio-button-shapes_mark{
  border-radius:50%; /* 外側を円形にする */
  box-shadow:inset 0 0 0 3px #ffffff, inset 0 0 0 5px #93c5fd; /* 内側へ二重の円を表示 */
}

.various-radio-button-shapes_option--double .various-radio-button-shapes_mark::after{
  width:8px; /* 二重丸型の内側マークの横幅 */
  height:8px; /* 二重丸型の内側マークの高さ */
  border-radius:50%; /* 内側マークを円形にする */
}

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

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

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

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

}

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

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

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

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

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSだけで動作する、いろいろな形のラジオボタンです。HTMLファイルにラジオボタンの構造を記述し、CSSファイルで丸型・四角型・角丸型・ひし形・横長型・二重丸型の6種類のデザインを切り替えています。JavaScriptは使用しておらず、ブラウザ標準のラジオボタン機能を利用しているため、初心者でも導入しやすい構成です。

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

各ファイルの役割
index.html
ラジオボタンのHTML構造を記述するファイルです。選択肢の追加・削除、表示する項目名、value属性、name属性などを編集できます。形ごとのクラスを変更することで、表示するデザインを切り替えられます。

style.css
ラジオボタン全体のレイアウトや配色、枠線、角丸、選択時の表示、各形状のデザインを設定しています。丸型・四角型・角丸型・ひし形・横長型・二重丸型の見た目はこのファイルで管理します。

設置方法・使い方
sampleフォルダ内にindex.htmlとstyle.cssを配置します。
その後、sample/index.htmlをブラウザで開くと、そのまま動作を確認できます。JavaScriptや追加ライブラリは不要で、HTMLとCSSだけで利用できます。

カスタマイズできる内容
index.htmlでは選択肢名、value属性、デザインごとのクラス名、選択肢の数を変更できます。
style.cssでは文字色、背景色、枠線の色、角丸、ラジオボタンのサイズ、余白、カードサイズ、列数、形状ごとのデザイン、選択時の色、フォーカス表示などを自由に変更できます。

数値調整
style.css
max-width:900px; …… 全体の最大横幅です。大きくすると横幅が広くなります。
padding:36px; …… 全体の内側余白です。大きくすると余白が広くなります。
gap:20px; …… ラジオボタン同士の間隔です。大きくすると項目間の余白が広がります。
width:24px; height:24px; …… 標準のラジオボタンサイズです。大きくすると選択マークも大きくなります。
width:38px; …… 横長型ラジオボタンの横幅です。値を変更すると横長の長さが変わります。
border-radius:7px; …… 角丸型の丸みです。値を大きくするとより丸い形になります。
transition:.2s; …… 選択時のアニメーション時間です。値を大きくするとゆっくり切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmedia queryで画面幅に応じて表示列数を変更しています。PCでは3列、タブレットでは2列、スマートフォンでは1列表示になります。また、max-widthやpaddingを利用して画面サイズに合わせた見やすいレイアウトになるため、スマートフォン・タブレット・PCで利用できます。