縦並びのラジオボタンを作る方法
縦並びのラジオボタンをHTMLとCSSだけで作る方法を紹介します。選択肢を上下に並べることで、項目数が多いフォームでも見やすく操作しやすいレイアウトになります。
アンケート、設定画面、お問い合わせフォーム、会員登録画面など、複数の候補から1つだけ選択する場面で利用できます。横幅を気にせず配置できるため、長い項目名でもレイアウトが崩れにくいのが特徴です。
サンプルはHTMLとCSSのみで動作します。ラジオボタンの項目追加や文章の変更、余白や色、角丸なども簡単にカスタマイズできるため、さまざまなフォームへそのまま利用できます。
掲載しているコードは自由にカスタマイズできます。
デモ
コードをコピーして使おう！
<!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="vertical-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="vertical-radio-button_title">
好きな言語を選択
</div>
<!-- 選択方法を案内する説明文 -->
<p class="vertical-radio-button_text">
複数の選択肢から1つだけ選択できます。
</p>
<!-- 縦並びで表示するラジオボタン一覧 -->
<div class="vertical-radio-button_list">
<!-- HTMLのラジオボタン項目 -->
<label class="vertical-radio-button_label">
<!-- HTMLを選択するラジオボタン -->
<input
class="vertical-radio-button_input"
type="radio"
name="language"
value="html"
checked>
<!-- HTMLの項目名 -->
<span class="vertical-radio-button_name">
HTML
</span>
</label>
<!-- CSSのラジオボタン項目 -->
<label class="vertical-radio-button_label">
<!-- CSSを選択するラジオボタン -->
<input
class="vertical-radio-button_input"
type="radio"
name="language"
value="css">
<!-- CSSの項目名 -->
<span class="vertical-radio-button_name">
CSS
</span>
</label>
<!-- JavaScriptのラジオボタン項目 -->
<label class="vertical-radio-button_label">
<!-- JavaScriptを選択するラジオボタン -->
<input
class="vertical-radio-button_input"
type="radio"
name="language"
value="javascript">
<!-- JavaScriptの項目名 -->
<span class="vertical-radio-button_name">
JavaScript
</span>
</label>
<!-- PHPのラジオボタン項目 -->
<label class="vertical-radio-button_label">
<!-- PHPを選択するラジオボタン -->
<input
class="vertical-radio-button_input"
type="radio"
name="language"
value="php">
<!-- PHPの項目名 -->
<span class="vertical-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:16px;
16pxはラジオボタン同士の間隔です。値を大きくすると縦方向の間隔が広がります。
min-height:60px;
60pxは各項目の最小高さです。値を変更するとクリックしやすさや見た目が変わります。
font-size:22px;
22pxはタイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:18px;
18pxは項目名の文字サイズです。値を変更すると項目名の大きさが変わります。
border-radius:18px;
18pxは全体カードの角丸です。値を変更すると丸みが変わります。
border-radius:12px;
12pxは各項目の角丸です。値を変更すると項目の丸みが変わります。
width:20px;
height:20px;
20pxはラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、padding、media queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れず快適に利用できます。
コメント