基本のラジオボタンを作る方法
基本のラジオボタンを作る方法を紹介します。このサンプルでは、HTMLのradio要素を使用し、複数の選択肢から1つだけ選択できるラジオボタンを作成します。HTMLとCSSだけで実装しているため、シンプルな構成で導入しやすく、入力フォームや設定画面など幅広い場面で利用できます。初期状態では1つの項目を選択した状態で表示され、別の項目をクリックすると選択が切り替わります。
お問い合わせ画面、会員サイトのプロフィール設定、ECサイトの商品オプション、管理画面の各種設定、アンケートフォームなど、複数の候補から1つだけ選択してもらいたい場面に適しています。各項目はクリックしやすいレイアウトになっており、ラジオボタンだけでなく項目全体をクリックして選択できるため、スマートフォン・タブレット・PCでも快適に操作できます。
タイトル、説明文、選択項目の追加・削除、表示する文字、value属性、初期選択する項目はHTMLから変更できます。CSSでは全体の横幅、余白、背景色、枠線、角丸、文字サイズ、ラジオボタンの大きさや選択時の色などを用途に合わせて調整できます。レスポンシブにも対応しているため、初心者でも導入しやすく、実際のWebサイトでも利用しやすい基本的なラジオボタンのサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ラジオボタンは複数の選択肢から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では複数の選択肢から1つだけ選択できる基本的なラジオボタンを作成し、CSSでは全体レイアウトや各項目のデザインを設定しています。シンプルな構成のため、初心者でも導入しやすく、入力フォームや設定画面などへそのまま利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。タイトル、説明文、選択項目の追加・削除、表示する文字、value属性、初期選択する項目などを変更できます。
style.cssは全体レイアウトやラジオボタン項目のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、ラジオボタンの大きさや選択時の色などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたラジオボタンをクリックすると、複数の選択肢から1つだけ選択できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、選択項目の追加・削除、表示する文字、value属性、初期選択する項目を変更できます。用途に合わせて性別選択、配送方法、支払い方法、アンケートなどさまざまなフォームへ利用できます。
style.cssでは全体の横幅、背景色、余白、枠線、角丸、文字サイズ、ラジオボタンの大きさ、選択時の色（accent-color）、項目同士の間隔などを変更できます。
数値調整
style.css
max-width:640px;
ラジオボタン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:14px;
ラジオボタン項目同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
min-height:56px;
各項目の最小高さです。値を大きくするとクリック・タップしやすくなり、小さくするとコンパクトになります。
padding:14px 16px;
各項目の内側余白です。上下14pxを大きくすると高さが増え、左右16pxを大きくすると文字との間隔が広がります。
border-radius:10px;
各項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:20px;
ラジオボタンの横幅です。値を大きくするとラジオボタンが大きく表示されます。
height:20px;
ラジオボタンの高さです。値を大きくすると縦方向に大きく表示されます。
margin:0 12px 0 0;
ラジオボタンと文字の間隔です。12pxを大きくすると文字との距離が広がり、小さくすると近付きます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:640pxにより画面幅に合わせて全体が縮小されます。また、640px以下ではpaddingやmarginを調整しているため、スマートフォン・タブレット・PCでも見やすく操作しやすいレイアウトになります。
コメント