ラジオボタンの基本から自由な並べ方まで！横・縦・2列・2行の作り方

ラジオボタン
2026.07.21
無料ツール
ラジオボタンを自由に作成

選択肢・並び方・ボタンの形・サイズ・色・余白・角丸などを設定して、HTML・CSSを自動生成できます。

ラジオボタン作成ツールを使う
新しいタブで開きます

ラジオボタンの基本的な作り方から、選択肢を横並び・縦並び・複数列・複数行に配置する方法まで紹介します。ラジオボタンは、複数の選択肢から1つだけを選んでもらうフォーム部品で、アンケートや申し込みフォーム、各種設定画面などで使用できます。

今回のデモでは、①基本の横並び、②縦並び、③2列・3行、④3列・2行の4パターンを確認できます。選択肢の数や表示する場所に合わせて並べ方を変更でき、同じラジオボタンでも配置方法によってフォーム全体の見た目や使いやすさが変わります。

それぞれのラジオボタンは、同じグループ内で1つの項目だけを選択できる仕組みです。デモでは実際に項目をクリックして選択状態を確認できるほか、選択した値を取得して利用するための取得結果表示も用意しています。

横並びと縦並びにはFlexbox、2列・3行と3列・2行の配置にはCSS Gridを使用しています。HTMLの基本構造は共通で、CSSの設定を変更することで並べ方を切り替えられます。各配置の作り方や列数・行数の調整方法、選択した値の取得方法は、下記の「ファイル構成と設置方法」で説明します。

デモ

① 基本のラジオボタン（横並び）
② 縦並びのラジオボタン
③ 縦に2列で並ぶラジオボタン
④ 横に2行で並ぶラジオボタン

①は横並び、②は縦並び、③は2列・3行、④は3列・2行のラジオボタンです。各グループでは1つの項目だけを選択できます。取得結果の表示は共通JavaScriptがラジオボタンに対応している場合に動作します。

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <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="base-radio-button_container">

    <!-- 横並びのラジオボタン -->
    <fieldset class="base-radio-button_group base-radio-button_horizontal" aria-label="好きな果物を選択してください">

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-basic-apple" type="radio" name="base-radio-button-basic" value="りんご">
        りんご
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-basic-orange" type="radio" name="base-radio-button-basic" value="みかん">
        みかん
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-basic-grape" type="radio" name="base-radio-button-basic" value="ぶどう">
        ぶどう
      </label>

    </fieldset>

  </div>

</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <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="base-radio-button_container">

    <!-- 選択肢を縦方向に配置 -->
    <fieldset class="base-radio-button_group base-radio-button_vertical" aria-label="好きな果物を選択してください">

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-vertical-apple" type="radio" name="base-radio-button-vertical" value="りんご">
        りんご
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-vertical-orange" type="radio" name="base-radio-button-vertical" value="みかん">
        みかん
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-vertical-grape" type="radio" name="base-radio-button-vertical" value="ぶどう">
        ぶどう
      </label>

    </fieldset>

  </div>

</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <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列・3行のラジオボタン全体 -->
  <div class="base-radio-button_container">

    <!-- 選択肢を2列に配置 -->
    <fieldset class="base-radio-button_group base-radio-button_two-columns" aria-label="好きな果物を選択してください">

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-apple" type="radio" name="base-radio-button-columns" value="りんご">
        りんご
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-orange" type="radio" name="base-radio-button-columns" value="みかん">
        みかん
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-grape" type="radio" name="base-radio-button-columns" value="ぶどう">
        ぶどう
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-peach" type="radio" name="base-radio-button-columns" value="もも">
        もも
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-banana" type="radio" name="base-radio-button-columns" value="バナナ">
        バナナ
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-columns-strawberry" type="radio" name="base-radio-button-columns" value="いちご">
        いちご
      </label>

    </fieldset>

  </div>

</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <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>

  <!-- 3列・2行のラジオボタン全体 -->
  <div class="base-radio-button_container">

    <!-- 選択肢を3列・2行に配置 -->
    <fieldset class="base-radio-button_group base-radio-button_two-rows" aria-label="好きな果物を選択してください">

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-apple" type="radio" name="base-radio-button-rows" value="りんご">
        りんご
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-orange" type="radio" name="base-radio-button-rows" value="みかん">
        みかん
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-grape" type="radio" name="base-radio-button-rows" value="ぶどう">
        ぶどう
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-peach" type="radio" name="base-radio-button-rows" value="もも">
        もも
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-banana" type="radio" name="base-radio-button-rows" value="バナナ">
        バナナ
      </label>

      <label class="base-radio-button_option">
        <input class="base-radio-button_input" id="base-radio-button-rows-strawberry" type="radio" name="base-radio-button-rows" value="いちご">
        いちご
      </label>

    </fieldset>

  </div>

</body>
</html>
コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

  1. ① InfinityFreeの無料サーバー準備
  2. ② File Managerでアップロード・公開

ファイル構成と設置方法

今回のラジオボタンは、HTMLとCSSの2つのファイルで作成しています。 ①基本の横並び、②縦並び、③2列・3行、④3列・2行の4種類を用意しており、 それぞれ独立したサンプルとしてダウンロードできます。 HTMLでは選択肢の内容とグループを設定し、CSSでは選択肢の並び方や間隔を指定しています。 4種類ともファイル構成は共通で、JavaScriptを使用せずにラジオボタンの選択操作ができます。 

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

各ファイルの役割
index.htmlには、ラジオボタンをグループ化するfieldset、 選択肢の文字を表示するlabel、 実際に選択するinput type="radio"を記述しています。 ①と②は3つ、③と④は6つの選択肢を配置しています。
style.cssでは、ラジオボタン全体の横幅・背景色・余白・枠線などの共通デザインと、 FlexboxまたはCSS Gridを使用した選択肢の配置方法を設定しています。 ファイル名は共通ですが、4種類それぞれで配置用のCSSが異なります。

設置方法・使い方
使用したい配置の「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、 展開してください。 それぞれのZIPには、その配置に対応するindex.htmlと style.cssが収録されています。
2つのファイルをsampleフォルダ内の同じ階層に配置し、 index.htmlをブラウザで開くとラジオボタンが表示されます。 選択肢の丸い部分、または文字をクリックすると選択状態が切り替わります。 同じグループ内では1つだけを選択でき、別の項目を選ぶと前の選択が解除されます。
4種類を同時に設置する必要はありません。 使用したい並び方に合わせて、該当するサンプルを選択してください。

ラジオボタンの共通構造と選択肢の設定
4種類ともHTMLの基本構造は同じです。 fieldsetで選択肢を1つのグループにまとめ、 各inputをlabelで囲んでいます。
①基本の横並びでは、次のように記述しています。 

<fieldset class="base-radio-button_group base-radio-button_horizontal" aria-label="好きな果物を選択してください">

  <label class="base-radio-button_option">
    <input class="base-radio-button_input" id="base-radio-button-basic-apple" type="radio" name="base-radio-button-basic" value="りんご">
    りんご
  </label>

  <label class="base-radio-button_option">
    <input class="base-radio-button_input" id="base-radio-button-basic-orange" type="radio" name="base-radio-button-basic" value="みかん">
    みかん
  </label>

  <label class="base-radio-button_option">
    <input class="base-radio-button_input" id="base-radio-button-basic-grape" type="radio" name="base-radio-button-basic" value="ぶどう">
    ぶどう
  </label>

</fieldset>

type="radio"はラジオボタンを作成する指定です。 name="base-radio-button-basic"を3つの選択肢に共通して指定することで、 1つだけ選択できるグループになります。
value="りんご"は選択時に取得する値です。 label内の「りんご」は画面に表示する文字で、 value属性の値とは別に設定できます。
選択肢を変更する場合は、index.htmlのlabel内の文字と inputのvalue属性を書き換えてください。 選択肢を追加する場合はlabelとinputの組み合わせを増やし、 同じグループ内のname属性を統一します。 id属性は各選択肢で重複しない値を指定してください。

① 基本の横並びにする方法
基本の横並びでは、base-radio-button_horizontalクラスを使用しています。 共通のbase-radio-button_groupに設定された display: flex;を利用し、 次のCSSで選択肢を左から右へ配置します。 

/* =========================================
  横並び
========================================= */

.base-radio-button_horizontal {
  flex-direction: row; /* 選択肢を横方向に並べる */
  flex-wrap: wrap; /* 横幅が足りない場合は次の行へ折り返す */
}

flex-direction: row;は、選択肢を横方向に並べる指定です。 flex-wrap: wrap;によって、表示領域に収まらなくなった選択肢は 次の行へ折り返されます。
3つの選択肢を横に並べたい場合に適した構成で、 選択肢を追加しても横幅に応じて自動的に折り返します。 折り返しを禁止したい場合はflex-wrap: nowrap;に変更できますが、 選択肢の数や文字数によっては表示領域からはみ出す可能性があります。

② 縦並びにする方法
縦並びでは、base-radio-button_verticalクラスを使用します。 横並びと同じFlexboxを使用していますが、 flex-directionの指定を変更することで、 選択肢を上から下へ並べています。 

/* =========================================
  縦並び
========================================= */

.base-radio-button_vertical {
  flex-direction: column; /* 選択肢を縦方向に並べる */
  align-items: flex-start; /* 選択肢を左端に揃える */
}

flex-direction: column;を指定すると、 選択肢が1行に1つずつ縦方向へ配置されます。 align-items: flex-start;は、 各選択肢を左端に揃えるための指定です。
①と②の主な違いはflex-directionの値です。 HTML側ではfieldsetに指定するクラス名が異なり、 ①はbase-radio-button_horizontal、 ②はbase-radio-button_verticalを使用しています。 選択肢のHTML構造や、1つだけ選択できる仕組みは変わりません。

③ 2列・3行にする方法
2列・3行では、FlexboxではなくCSS Gridを使用しています。 base-radio-button_two-columnsクラスに display: grid;を指定し、 6つの選択肢を2列に配置しています。 

/* =========================================
  2列・3行の配置
========================================= */

.base-radio-button_two-columns {
  display: grid; /* 選択肢をGridで配置する */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 幅が等しい2列を作る */
  gap: 18px 24px; /* 行間18px・列間24px */
}

grid-template-columns: repeat(2, minmax(0, 1fr));は、 同じ幅の列を2つ作る指定です。 6つの選択肢を左から右へ順番に配置するため、 1行に2つずつ、合計3行になります。
repeat()の最初の数値2が列数です。 例えば3に変更すると3列・2行、 1に変更すると1列・6行になります。
gap: 18px 24px;は選択肢の間隔を指定しており、 18pxが上下の行間、 24pxが左右の列間です。 数値を大きくすると選択肢同士の間隔が広がり、 小さくすると狭くなります。

④ 3列・2行にする方法
3列・2行もCSS Gridを使用しています。 ③と同じ6つの選択肢を使用していますが、 base-radio-button_two-rowsクラスでは 列数を3つに指定しています。 

/* =========================================
  3列・2行の配置
========================================= */

.base-radio-button_two-rows {
  display: grid; /* 選択肢をGridで配置する */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 幅が等しい3列を作る */
  gap: 18px 24px; /* 行間18px・列間24px */
}

repeat(3, minmax(0, 1fr))によって、 1行に3つの選択肢を配置します。 6つの選択肢があるため、合計2行になります。
③と④の違いは、 grid-template-columnsに指定している列数です。 ③はrepeat(2, ...)で2列、 ④はrepeat(3, ...)で3列にしています。
CSS Gridでは列数を指定すると、 選択肢の数に応じて必要な行が自動的に作られます。 そのため、行数を直接指定しなくても、 6つの選択肢を3列・2行に配置できます。

選択したラジオボタンの値を取得する方法
ラジオボタンの選択値をJavaScriptで取得する場合は、 document.querySelector()と :checkedを使用します。
例えば①の横並びでは、 3つのラジオボタンに共通の name="base-radio-button-basic"が指定されています。 このname属性を使って、選択されているラジオボタンを取得します。 

// ① 基本の横並びで選択した値を取得する
const value = document.querySelector('input[name="base-radio-button-basic"]:checked')?.value;

input[name="base-radio-button-basic"]:checkedは、 指定したグループ内で現在選択されているラジオボタンを表します。 ?.valueによって、その要素のvalue属性を取得し、 変数valueへ代入しています。
例えば「りんご」を選択している場合、 変数valueには文字列"りんご"が入ります。 「みかん」を選択すると"みかん"になります。 何も選択されていない場合はundefinedです。
選択されている場合に取得する値のデータ型は stringです。 この変数を使って、選択内容に応じた処理を追加できます。

4種類それぞれの選択値を取得する方法
4種類のラジオボタンは、それぞれ異なるname属性を使用しています。 そのため、取得する際は対象のグループに合わせて querySelector()内のname属性を変更します。
それぞれの取得方法は次のとおりです。 

// ① 基本の横並び
const basicValue = document.querySelector('input[name="base-radio-button-basic"]:checked')?.value;

// ② 縦並び
const verticalValue = document.querySelector('input[name="base-radio-button-vertical"]:checked')?.value;

// ③ 2列・3行
const columnsValue = document.querySelector('input[name="base-radio-button-columns"]:checked')?.value;

// ④ 3列・2行
const rowsValue = document.querySelector('input[name="base-radio-button-rows"]:checked')?.value;

①はbase-radio-button-basic、 ②はbase-radio-button-vertical、 ③はbase-radio-button-columns、 ④はbase-radio-button-rowsを指定します。
取得方法は4種類とも同じで、 選択肢の並び方が変わってもJavaScriptの基本的な処理は変わりません。
これらは値を取得する方法を説明するためのJavaScriptコードであり、 ダウンロードするHTML・CSSには含まれていません。 実際に使用する場合は、index.htmlの </body>の直前にscript要素を追加し、 その中へ必要な取得処理を記述してください。 ラジオボタンのHTMLが読み込まれたあと、 値を取得したいタイミングで実行する必要があります。
例えば選択操作のあとに処理を実行すれば、 その時点で選択されている項目の値を取得できます。 ページを開いた直後に取得する場合は、 今回のHTMLでは初期選択が指定されていないため、 選択前の値はundefinedになります。

ラジオボタン全体の横幅と見た目を調整する方法
4種類ともbase-radio-button_containerに 共通のデザインを設定しています。 全体の横幅や余白、背景色、角丸を変更する場合は、 style.cssの次の部分を編集します。 

.base-radio-button_container {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 680px; /* 全体の最大横幅 */
  margin: 40px auto; /* 上下40pxの余白を設け、左右中央に配置する */
  padding: 36px; /* 内側の余白 */
  border: 1px solid #dbe5f1; /* 外枠の太さと色 */
  border-radius: 18px; /* 外枠の角丸 */
  background: #f8fafc; /* 全体の背景色 */
  color: #111827; /* 基本の文字色 */
  font-family: sans-serif; /* フォントの種類 */
}

max-width: 680px;は全体の最大横幅です。 数値を大きくすると表示領域が広がり、 小さくするとコンパクトになります。
padding: 36px;は枠線と選択肢の間に設ける余白で、 数値を大きくすると内側の空間が広がります。 border-radius: 18px;は外枠の角丸です。
ラジオボタン自体の大きさは base-radio-button_inputの width: 18px;とheight: 18px;で指定しています。 選択時の青色はaccent-color: #2563eb;で変更できます。

レスポンシブ対応
4種類ともstyle.cssで width: 100%;とmax-width: 680px;を使用し、 設置先の横幅に合わせて表示できるようにしています。
さらに、画面幅が640px以下になると、 メディアクエリによって全体の余白と文字サイズを変更します。 ④の3列・2行では、選択肢の列数も変更しています。 

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  .base-radio-button_container {
    margin: 28px auto; /* スマートフォンでの上下余白 */
    padding: 28px 18px; /* スマートフォンでの内側余白 */
  }

  .base-radio-button_option {
    font-size: 15px; /* スマートフォンでの文字サイズ */
  }

  .base-radio-button_two-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 画面幅640px以下では2列・3行に変更する */
  }

}

上記は④の3列・2行で使用しているメディアクエリです。 画面幅が640px以下になると、 全体の上下余白を40pxから28pxへ変更し、 内側余白を上下28px・左右18pxに調整します。 選択肢の文字サイズも16pxから15pxになります。
①の横並びは横幅が足りなくなると折り返し、 ②の縦並びは1列のまま表示されます。 ③の2列・3行も列数を変更せず、2列の配置を維持します。
④の3列・2行だけは、 grid-template-columns: repeat(2, minmax(0, 1fr));によって、 スマートフォンでは2列・3行に切り替わります。 スマートフォンでも3列・2行を維持したい場合は、 メディアクエリ内のbase-radio-button_two-rowsに対する指定を削除してください。
①〜③のCSSには、この列数変更の指定はありません。 画面幅による余白や文字サイズの調整は共通ですが、 選択肢の並び方が変わるのは④だけです。

この記事の動作・特徴

基本

各UIや機能の基本形。ツールで生成する基本コードの土台になる記事。

その他のコードを探す
レイアウト

上下左右の配置、縦横並び、列数、全画面、固定、折り返しなど、配置や構成を変更する記事。

その他のコードを探す

こちらもおすすめ

ラジオボタン
ラジオボタンのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント