縦に2列で並ぶラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

縦に2列で並ぶラジオボタンを作る方法

縦に2列で並ぶラジオボタンを作る方法を紹介します。ラジオボタンを2列のレイアウトで配置することで、多くの選択肢をコンパクトに表示できます。HTMLとCSSだけで実装できるため、JavaScriptを使わずに導入できるシンプルなサンプルです。

このサンプルでは、複数の選択肢を2列のグリッドレイアウトで表示し、1つだけ選択できるラジオボタンを実装しています。お問い合わせフォームや会員登録画面、設定画面、アンケートフォームなど、選択項目が多いフォームでも見やすく整理できます。項目名や選択肢の追加・削除、余白や色なども簡単に変更できます。

レスポンシブ対応も行っているため、パソコンでは2列表示、スマートフォンでは1列表示へ切り替わります。限られた画面スペースでも見やすく操作しやすいレイアウトになるため、実際のWebサイトでも利用しやすいラジオボタンを作成したい方におすすめです。

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

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

デモ

好きな言語を選択

2列に並んだ選択肢から1つだけ選択できます。

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>縦に2列で並ぶラジオボタン</title>

  <!-- ラジオボタンのデザインを設定するCSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 縦に2列で並ぶラジオボタン全体 -->
  <div class="two-column-radio-button_demo">

    <!-- ラジオボタンエリアのタイトル -->
    <div class="two-column-radio-button_title">
      好きな言語を選択
    </div>

    <!-- 選択方法を案内する説明文 -->
    <p class="two-column-radio-button_text">
      2列に並んだ選択肢から1つだけ選択できます。
    </p>

    <!-- 2列で表示するラジオボタン一覧 -->
    <div class="two-column-radio-button_list">

      <!-- HTMLのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- HTMLの項目名 -->
        <span class="two-column-radio-button_name">
          HTML
        </span>

      </label>

      <!-- CSSのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- CSSの項目名 -->
        <span class="two-column-radio-button_name">
          CSS
        </span>

      </label>

      <!-- JavaScriptのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- JavaScriptの項目名 -->
        <span class="two-column-radio-button_name">
          JavaScript
        </span>

      </label>

      <!-- PHPのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- PHPの項目名 -->
        <span class="two-column-radio-button_name">
          PHP
        </span>

      </label>

      <!-- Pythonのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- Pythonの項目名 -->
        <span class="two-column-radio-button_name">
          Python
        </span>

      </label>

      <!-- SQLのラジオボタン項目 -->
      <label class="two-column-radio-button_item">

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

        <!-- SQLの項目名 -->
        <span class="two-column-radio-button_name">
          SQL
        </span>

      </label>

    </div>

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

  </div>

</body>
</html>

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

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

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

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

/* ========================================
   2列のラジオボタン一覧
======================================== */
.two-column-radio-button_list{
  display:grid; /* 各ラジオボタン項目をグリッドで配置 */
  grid-template-columns:repeat(2,1fr); /* 同じ横幅の2列で表示 */
  gap:16px; /* 縦横の項目間隔。16pxを大きくすると項目同士が離れる */
}

/* ========================================
   各ラジオボタン項目
======================================== */
.two-column-radio-button_item{
  display:flex; /* ラジオボタンと項目名を横並びにする */
  align-items:center; /* ラジオボタンと文字を縦方向の中央へ揃える */
  gap:12px; /* ラジオボタンと項目名の間隔。12pxを大きくすると間隔が広がる */
  width:100%; /* グリッド列の横幅いっぱいに表示 */
  min-height:60px; /* 項目の最小高さ。60pxを大きくすると項目が高くなる */
  padding:18px; /* 項目の内側余白。18pxを大きくすると内容との間隔が広がる */
  border:1px solid #dfe7f0; /* 項目を囲む1pxの枠線 */
  border-radius:12px; /* 項目の角丸。12pxを大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  box-sizing:border-box; /* paddingとborderを横幅と高さに含める */
}

/* ========================================
   ラジオボタン本体
======================================== */
.two-column-radio-button_input{
  width:20px; /* ラジオボタンの横幅。20pxを大きくすると横方向へ大きくなる */
  height:20px; /* ラジオボタンの高さ。20pxを大きくすると縦方向へ大きくなる */
  margin:0; /* ブラウザ標準の外側余白を削除 */
  accent-color:#0b6bff; /* 選択時に表示する色 */
  flex-shrink:0; /* 横幅が狭くてもラジオボタンを縮めない */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

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

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

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

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

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

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

  /* スマートフォン表示時の各項目 */
  .two-column-radio-button_item{
    padding:16px; /* 内側余白を16pxへ縮小して画面内へ収める */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでラジオボタンの選択肢を配置し、CSSファイルで2列レイアウトやデザインを設定しています。JavaScriptを使用せず、CSS Gridを利用してパソコンでは2列、スマートフォンでは1列に切り替わるレスポンシブ対応のラジオボタンを作成できます。

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

各ファイルの役割
index.html
ラジオボタンの選択肢を配置します。項目名の変更や追加・削除、初期選択する項目の変更を行えます。

style.css
ラジオボタンを2列で並べるレイアウトや、背景色、余白、文字サイズ、角丸、レスポンシブ表示など見た目全体を設定します。

設置方法・使い方
sampleフォルダ内の index.html をブラウザで開くと利用できます。パソコンでは2列で表示され、スマートフォンでは自動的に1列表示へ切り替わります。ラジオボタンは常に1つだけ選択できます。

カスタマイズできる内容
index.htmlではラジオボタンの項目名や選択肢の追加・削除、初期選択する項目を変更できます。style.cssでは2列レイアウト、文字サイズ、背景色、余白、枠線、角丸、ラジオボタンの色、項目同士の間隔などを自由に調整できます。

数値調整
max-width:760px;
760pxは全体の最大横幅です。値を大きくすると表示領域が広くなります。

grid-template-columns:repeat(2,1fr);
2列で表示する設定です。列数を変更すると表示する列数が変わります。

gap:16px;
16pxは各項目の縦横の間隔です。値を大きくすると項目同士の間隔が広がります。

min-height:60px;
60pxは各項目の最小高さです。値を変更するとクリックしやすさや見た目が変わります。

padding:32px;
32pxは全体カードの内側余白です。値を変更すると余白が広くなります。

border-radius:18px;
18pxは全体カードの角丸です。値を変更すると丸みが変わります。

border-radius:12px;
12pxは各項目の角丸です。値を変更すると項目の丸みが変わります。

width:20px;
height:20px;
20pxはラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、CSS Grid、padding、media queryを使用しているため、スマートフォン・タブレット・PCで見やすいレイアウトを維持できます。画面幅が狭くなると2列表示から1列表示へ自動的に切り替わります。