基本のラジオボタンを作る方法
基本のラジオボタンを作る方法を紹介します。ラジオボタンは複数の選択肢から1つだけ選択できるフォーム部品で、性別や支払い方法、配送方法など、1つだけ選ばせたい場面でよく利用されます。
このサンプルではHTMLとCSSだけを使用し、シンプルなラジオボタンを実装しています。特別なライブラリやJavaScriptは不要で、ブラウザですぐに動作を確認できます。基本的な構造を理解しておくことで、さまざまなフォームへ応用しやすくなります。
選択肢の追加や変更も簡単に行えるため、アンケートやお問い合わせフォーム、設定画面など幅広い用途で利用できます。まずは基本形としてラジオボタンの仕組みを確認したい方におすすめのサンプルです。
カスタマイズについて ラジオボタンの項目名や選択肢は用途に合わせて自由に変更できます。
デモ
ラジオボタンは複数の選択肢から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>基本のラジオボタン</title>
<!-- ラジオボタンのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 基本のラジオボタン全体 -->
<div class="basic-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="basic-radio-button_title">
好きな言語を選択
</div>
<!-- ラジオボタンの操作方法を案内する説明文 -->
<p class="basic-radio-button_text">
複数の選択肢から1つだけ選択できます。
</p>
<!-- ラジオボタン一覧 -->
<div class="basic-radio-button_list">
<!-- HTMLのラジオボタン項目 -->
<label class="basic-radio-button_label">
<!-- HTMLを選択するラジオボタン -->
<input
class="basic-radio-button_input"
type="radio"
name="language"
value="html"
checked>
<!-- HTMLの項目名 -->
<span class="basic-radio-button_name">
HTML
</span>
</label>
<!-- CSSのラジオボタン項目 -->
<label class="basic-radio-button_label">
<!-- CSSを選択するラジオボタン -->
<input
class="basic-radio-button_input"
type="radio"
name="language"
value="css">
<!-- CSSの項目名 -->
<span class="basic-radio-button_name">
CSS
</span>
</label>
<!-- JavaScriptのラジオボタン項目 -->
<label class="basic-radio-button_label">
<!-- JavaScriptを選択するラジオボタン -->
<input
class="basic-radio-button_input"
type="radio"
name="language"
value="javascript">
<!-- JavaScriptの項目名 -->
<span class="basic-radio-button_name">
JavaScript
</span>
</label>
<!-- PHPのラジオボタン項目 -->
<label class="basic-radio-button_label">
<!-- PHPを選択するラジオボタン -->
<input
class="basic-radio-button_input"
type="radio"
name="language"
value="php">
<!-- PHPの項目名 -->
<span class="basic-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:640px;
640pxは全体の最大横幅です。値を大きくすると横幅が広くなります。
padding:32px;
32pxは内側の余白です。値を大きくすると余白が広くなります。
gap:14px;
14pxはラジオボタン同士の間隔です。値を大きくすると項目の間隔が広がります。
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、padding、およびmedia queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れず利用できます。
コメント