最初から項目が選択されたラジオボタンを作る方法
最初から項目が選択されたラジオボタンを作る方法を紹介します。このサンプルでは、HTMLのchecked属性を使用して、ページを開いた時点であらかじめ1つの選択肢を選択した状態に設定します。利用者は初期状態を確認したうえで、必要に応じて別の項目へ選択を切り替えられます。
初期値を設定したラジオボタンは、お問い合わせフォーム、会員登録画面、管理画面、アンケート、ECサイトの配送方法や支払い方法の選択など、よく利用する項目をあらかじめ選択しておきたい場面で役立ちます。最初から適切な選択肢を表示しておくことで、入力の手間を減らし、フォームを分かりやすくできます。
項目名や説明文はHTMLから変更でき、CSSでは余白、文字サイズ、背景色、枠線、角丸などを自由に調整できます。checked属性を付ける項目を変更するだけで初期選択も簡単に切り替えられるため、スマートフォン・タブレット・PCで利用しやすいラジオボタンを初心者でも導入できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開くとHTMLが最初から選択されています。別の項目をクリックすると選択が切り替わる動作を確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<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="radio-button-checked-default_wrap">
<!-- タイトル -->
<div class="radio-button-checked-default_title">
好きな言語を選択
</div>
<!-- 説明文 -->
<p class="radio-button-checked-default_text">
ページを開くと最初からJavaScriptが選択されています。
</p>
<!-- HTML -->
<label class="radio-button-checked-default_label">
<input
class="radio-button-checked-default_input"
type="radio"
name="language">
<span class="radio-button-checked-default_name">HTML</span>
</label>
<!-- CSS -->
<label class="radio-button-checked-default_label">
<input
class="radio-button-checked-default_input"
type="radio"
name="language">
<span class="radio-button-checked-default_name">CSS</span>
</label>
<!-- JavaScript（初期選択） -->
<label class="radio-button-checked-default_label">
<input
class="radio-button-checked-default_input"
type="radio"
name="language"
checked>
<span class="radio-button-checked-default_name">JavaScript</span>
</label>
<!-- PHP -->
<label class="radio-button-checked-default_label">
<input
class="radio-button-checked-default_input"
type="radio"
name="language">
<span class="radio-button-checked-default_name">PHP</span>
</label>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンを配置し、checked属性を利用してページを開いた時点で指定した項目が選択された状態を実現しています。CSSではラジオボタン全体のレイアウトや余白、枠線、背景色、文字サイズなどを設定し、見やすいデザインへ整えています。JavaScriptを使用せずに実装できるため、初期選択が必要なフォームを簡単に作成できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。タイトル、説明文、選択肢の項目名を変更できます。また、初期状態で選択したい項目へchecked属性を付け替えるだけで、最初に選択される項目を変更できます。
style.cssはラジオボタン全体のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、文字サイズ、ラジオボタンの色などを用途に合わせて変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと指定した項目が最初から選択された状態で表示され、別の項目をクリックすると通常のラジオボタンと同じように選択を切り替えられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、選択肢の項目名を変更できます。また、checked属性を付ける項目を変更すると、初期状態で選択される項目を自由に変更できます。
style.cssでは全体の横幅、余白、背景色、枠線、角丸、文字サイズ、ラジオボタンのサイズや色などを用途に合わせて調整できます。
数値調整
style.css
max-width:640px;
ラジオボタン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:12px;
ラジオボタンと項目名の間隔です。値を大きくすると間隔が広がり、小さくすると近づきます。
padding:14px 16px;
各項目の内側余白です。値を大きくすると選択項目全体が大きく表示されます。
margin-bottom:14px;
各項目の間隔です。値を大きくすると項目同士の間隔が広がります。
width:20px;
ラジオボタンの横幅です。値を変更するとボタンの大きさが変わります。
height:20px;
ラジオボタンの高さです。値を変更するとボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:640pxにより画面幅に合わせて全体が縮小されます。また、640px以下ではpadding:20px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント