横に2行で並ぶラジオボタンを作る方法
横に2行で並ぶラジオボタンをHTMLとCSSで作る方法を紹介します。6個の選択肢を横方向へ3列ずつ配置し、全体を2行に分けて表示するレイアウトです。縦に長くなりすぎず、複数の候補を一覧で見比べながら1つだけ選択できます。
このサンプルではCSS Gridを使ってラジオボタンを3列・2行に配置します。各ラジオボタンへ同じname属性を設定しているため、別の項目を選択すると現在の選択が解除され、常に1項目だけが選ばれます。JavaScriptや外部ライブラリは使用しません。
アンケートフォーム、会員登録画面、管理画面、設定画面など、選択肢を省スペースで整理したい場面に利用できます。HTMLでは項目名や初期選択を変更でき、CSSでは列数、項目間隔、文字サイズ、余白、枠線、角丸、選択色を調整できます。画面幅が狭くなると2列、さらに狭い画面では1列へ切り替わるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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-row-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="two-row-radio-button_title">
好きな言語を選択
</div>
<!-- 選択方法を案内する説明文 -->
<p class="two-row-radio-button_text">
2行に並んだ選択肢から1つだけ選択できます。
</p>
<!-- 3列・2行で表示するラジオボタン一覧 -->
<div class="two-row-radio-button_list">
<!-- HTMLのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- HTMLを選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="html">
<!-- HTMLの項目名 -->
<span class="two-row-radio-button_name">
HTML
</span>
</label>
<!-- CSSのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- CSSを選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="css">
<!-- CSSの項目名 -->
<span class="two-row-radio-button_name">
CSS
</span>
</label>
<!-- JavaScriptのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- JavaScriptを初期選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="javascript"
checked>
<!-- JavaScriptの項目名 -->
<span class="two-row-radio-button_name">
JavaScript
</span>
</label>
<!-- PHPのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- PHPを選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="php">
<!-- PHPの項目名 -->
<span class="two-row-radio-button_name">
PHP
</span>
</label>
<!-- Pythonのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- Pythonを選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="python">
<!-- Pythonの項目名 -->
<span class="two-row-radio-button_name">
Python
</span>
</label>
<!-- SQLのラジオボタン項目 -->
<label class="two-row-radio-button_label">
<!-- SQLを選択するラジオボタン -->
<input
class="two-row-radio-button_input"
type="radio"
name="two-row-language"
value="sql">
<!-- SQLの項目名 -->
<span class="two-row-radio-button_name">
SQL
</span>
</label>
</div>
<!-- ラジオボタンの動作を案内する補足文 -->
<p class="two-row-radio-button_note">
各項目をクリックすると選択が切り替わり、常に1つだけ選択されます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されており、横に2行で並ぶラジオボタンを作成できます。HTMLではラジオボタンの項目を配置し、CSSでは2行レイアウトやデザインを設定しています。JavaScriptを使用しないため、ブラウザだけでそのまま動作を確認できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ラジオボタンの選択肢や見出し、説明文を配置します。項目名の変更や選択肢の追加・削除、初期選択する項目を編集できます。
style.css
ラジオボタンを横方向へ2行で並べるレイアウトや、文字サイズ、余白、背景色、枠線、角丸、レスポンシブ表示など見た目全体を設定します。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。
配置後はsample/index.htmlをブラウザで開くだけで利用できます。
カスタマイズできる内容
index.htmlではラジオボタンの項目名や表示順、選択肢の追加・削除、初期選択する項目を変更できます。style.cssでは列数、項目間の余白、文字サイズ、背景色、枠線、角丸、ラジオボタンのサイズや選択色などを自由に調整できます。
数値調整
style.css
max-width:900px
全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
padding:32px
コンテンツ全体の内側余白です。値を変更すると余白の広さが変わります。
grid-template-columns:repeat(3,1fr)
ラジオボタンを3列で表示する設定です。列数を変更すると横方向に並ぶ項目数が変わります。
gap:16px
ラジオボタン同士の間隔です。値を大きくすると項目同士の間隔が広がります。
min-height:60px
各ラジオボタンの高さです。値を変更するとクリックしやすさや見た目が変わります。
border-radius:18px・12px
コンテナやラジオボタンの角丸です。値を大きくすると丸みが強くなります。
width:20px / height:20px
ラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、CSS Grid、media queryを使用しています。PCでは3列2行で表示され、タブレットでは2列、スマートフォンでは1列へ自動的に切り替わるため、PC・タブレット・スマートフォンのいずれでも利用できます。
コメント