初期選択されたラジオボタンを作る方法
初期選択されたラジオボタンを作る方法を紹介します。ページを開いた時点であらかじめ1つの選択肢を選択状態にしておけるため、初期値を設定したいフォームや設定画面などで便利に利用できます。
このサンプルではHTMLとCSSのみを使用し、ラジオボタンの基本的な実装方法に加えて、checked属性を使って初期状態を指定する方法を分かりやすく解説しています。JavaScriptを使用しないため、そのままコピーして利用できます。
初期値の変更方法や選択肢の追加・削除も簡単に行えるので、お問い合わせフォームやアンケート、設定画面などさまざまな場面に応用できます。
利用について 商用・個人利用を問わず自由にご利用いただけます。用途に合わせて自由にカスタマイズしてください。
デモ
コードをコピーして使おう！
<!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>
<!-- 同じsampleフォルダ内のCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 初期選択されたラジオボタン全体 -->
<div class="default-selected-radio-button_wrap">
<!-- タイトル -->
<div class="default-selected-radio-button_title">
利用プランを選択
</div>
<!-- 説明文 -->
<p class="default-selected-radio-button_text">
「標準プラン」のラジオボタンにchecked属性を付け、ページ表示時から選択された状態にしています。
</p>
<!-- ラジオボタン一覧 -->
<div class="default-selected-radio-button_list">
<!-- 無料プラン -->
<label class="default-selected-radio-button_label">
<!--
name属性はすべて同じ値にします。
同じnameにすることで常に1つだけ選択できます。
-->
<input
class="default-selected-radio-button_input"
type="radio"
name="plan"
value="free">
<!--
value属性はフォーム送信時の値です。
用途に合わせて変更してください。
-->
<!-- 画面へ表示する項目名 -->
<span class="default-selected-radio-button_name">
無料プラン
</span>
</label>
<!-- 標準プラン（初期選択） -->
<label class="default-selected-radio-button_label">
<!--
checked属性を付けると、
ページを開いた時点で選択された状態になります。
-->
<input
class="default-selected-radio-button_input"
type="radio"
name="plan"
value="standard"
checked>
<span class="default-selected-radio-button_name">
標準プラン
</span>
</label>
<!-- プレミアムプラン -->
<label class="default-selected-radio-button_label">
<input
class="default-selected-radio-button_input"
type="radio"
name="plan"
value="premium">
<span class="default-selected-radio-button_name">
プレミアムプラン
</span>
</label>
<!-- 法人プラン -->
<label class="default-selected-radio-button_label">
<input
class="default-selected-radio-button_input"
type="radio"
name="plan"
value="business">
<span class="default-selected-radio-button_name">
法人プラン
</span>
</label>
<!-- 学生プラン -->
<label class="default-selected-radio-button_label">
<input
class="default-selected-radio-button_input"
type="radio"
name="plan"
value="student">
<span class="default-selected-radio-button_name">
学生プラン
</span>
</label>
</div>
<!-- 補足説明 -->
<p class="default-selected-radio-button_note">
ページを開いた時点で「標準プラン」が選択されています。別の項目をクリックすると選択状態が切り替わります。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSのみで動作するため、JavaScriptは不要です。HTMLファイルにラジオボタンの構造を記述し、CSSファイルで見た目や初期選択時のデザインを設定しています。checked属性を付けるだけで、ページを開いた直後から任意のラジオボタンを選択済みの状態で表示できます。
ファイルはHTMLとCSSの2ファイルだけで構成されており、初心者でも内容を確認しながら編集しやすい構成です。表示する選択肢や初期選択する項目はHTMLを編集し、色やサイズなどのデザインはCSSを編集するだけで変更できます。
レスポンシブにも対応しているため、PC・タブレット・スマートフォンの画面幅に合わせて余白を自動調整します。そのままコピーして利用でき、用途に合わせて自由にカスタマイズできます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ラジオボタンの構造を記述するファイルです。選択肢の追加・削除、表示する文字、checked属性を付ける初期選択項目などを編集できます。
style.css
ラジオボタン全体のデザインを管理するファイルです。色、サイズ、余白、角丸、文字サイズ、レスポンシブ表示などの見た目を変更できます。
設置方法・使い方
sampleフォルダ内のindex.htmlとstyle.cssを同じ階層へ配置します。
ブラウザでsample/index.htmlを開くと、そのまま動作を確認できます。
初期選択するラジオボタンは、選択したいinput要素へchecked属性を追加してください。
カスタマイズできる内容
index.html
・選択肢の追加・削除
・選択肢名の変更
・checked属性を付ける初期選択項目の変更
・value属性の変更
style.css
・背景色
・文字色
・ラジオボタンの色
・ラジオボタンのサイズ
・タイトルサイズ
・余白
・角丸
・全体の横幅
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると表示領域が広くなります。
padding:36px;
全体の内側余白です。値を変更すると内容との間隔が変わります。
font-size:30px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
gap:16px;
ラジオボタン同士の間隔です。値を変更すると各項目の余白が変わります。
min-height:58px;
ラジオボタンの高さです。値を大きくするとクリックしやすくなります。
width:22px;
height:22px;
ラジオボタンのサイズです。値を変更すると丸の大きさが変わります。
レスポンシブ対応
レスポンシブ対応済みです。
style.cssのmedia queryで画面幅640px以下を判定し、paddingやmarginを調整してスマートフォンでも見やすく表示します。
width:100%、max-width、padding、media queryを利用してレイアウトを調整しているため、PC・タブレット・スマートフォンで利用できます。
コメント