横並びのラジオボタンを作る方法
横並びのラジオボタンを作る方法を紹介します。複数の選択肢を横一列に配置し、その中から1つだけ選択できる基本的なフォームUIです。選択肢の数が少なく、縦方向のスペースを節約したい場合に使いやすいレイアウトです。
このサンプルではHTMLとCSSだけを使用し、ラジオボタンと項目名を横並びに配置します。同じname属性を設定しているため、複数の項目を同時に選択することはできず、別の項目を選ぶと現在の選択が自動で切り替わります。
アンケート、設定画面、配送方法、表示形式など、選択肢をコンパクトに見せたい場面で利用できます。項目名や選択肢の数はHTML、間隔、文字サイズ、色、枠線、角丸、ラジオボタンの大きさはCSSから変更できます。画面幅が狭い場合は折り返して表示されるため、スマートフォン・タブレット・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>横並びのラジオボタン</title>
<!-- CSSを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ラジオボタン全体 -->
<div class="horizontal-radio-button_wrap">
<!-- タイトル -->
<h1 class="horizontal-radio-button_title">
好きな言語を選択
</h1>
<!-- 説明文 -->
<p class="horizontal-radio-button_text">
複数の選択肢から1つだけ選択できます。
</p>
<!-- 横並びラジオボタン -->
<div class="horizontal-radio-button_list">
<!-- HTML -->
<label class="horizontal-radio-button_label">
<input
class="horizontal-radio-button_input"
type="radio"
name="language"
value="html"
checked>
<span class="horizontal-radio-button_name">HTML</span>
</label>
<!-- CSS -->
<label class="horizontal-radio-button_label">
<input
class="horizontal-radio-button_input"
type="radio"
name="language"
value="css">
<span class="horizontal-radio-button_name">CSS</span>
</label>
<!-- JavaScript -->
<label class="horizontal-radio-button_label">
<input
class="horizontal-radio-button_input"
type="radio"
name="language"
value="javascript">
<span class="horizontal-radio-button_name">JavaScript</span>
</label>
<!-- PHP -->
<label class="horizontal-radio-button_label">
<input
class="horizontal-radio-button_input"
type="radio"
name="language"
value="php">
<span class="horizontal-radio-button_name">PHP</span>
</label>
</div>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでラジオボタンの選択肢を配置し、CSSファイルで横並びレイアウトやデザインを設定しています。JavaScriptを使用しないため、シンプルな構成で横並びのラジオボタンを実装できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ラジオボタンの選択肢を配置します。項目名の変更や追加、初期選択する項目を自由に編集できます。
style.css
ラジオボタンを横並びに配置し、余白、文字サイズ、枠線、背景色、角丸、レスポンシブ表示などの見た目を設定します。
設置方法・使い方
sampleフォルダ内の index.html をブラウザで開くと利用できます。同じname属性を持つラジオボタンのため、複数の選択肢から常に1つだけ選択できます。
カスタマイズできる内容
index.htmlでは選択肢の追加・削除や項目名、初期選択する項目を変更できます。style.cssでは横方向の間隔、背景色、文字サイズ、余白、角丸、枠線、ラジオボタンの色などを自由に変更できます。
数値調整
max-width:760px;
760pxは全体の最大横幅です。値を大きくすると横幅が広くなります。
padding:32px;
32pxは全体の内側余白です。値を変更すると余白が変わります。
gap:14px;
14pxは横並びに表示する項目同士の間隔です。値を大きくすると項目同士が離れて表示されます。
min-height:54px;
54pxは各項目の高さです。値を変更するとクリックしやすさや見た目が変わります。
font-size:22px;
22pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:16px;
16pxは説明文と項目名の文字サイズです。値を変更すると文字の大きさが変わります。
border-radius:18px;
18pxは全体カードの角丸です。値を変更すると丸みが変わります。
border-radius:10px;
10pxは各ラジオボタン項目の角丸です。値を変更すると項目の角の丸みが変わります。
width:20px;
height:20px;
20pxはラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、flex-wrap、padding、media queryを使用しているため、画面幅が狭くなると項目が自動で折り返され、スマートフォン・タブレット・PCで快適に利用できます。
コメント