選択中を強調表示するラジオボタンを作る方法
選択中の項目だけ背景色や枠線、文字色を変更して、現在どのラジオボタンが選択されているのかを一目で確認できるサンプルです。HTMLとCSSだけで実装できるため、JavaScriptを使わずにシンプルな選択UIを作成できます。
お問い合わせフォームや会員登録、料金プランの選択、配送方法の選択など、現在の選択内容を目立たせたい場面に適しています。ラベル全体がクリックできるため、操作性も高く、スマートフォンでも使いやすいデザインです。
サンプルコードでは、選択された項目だけ色や枠線を切り替える基本的な実装を紹介しています。文字や色、余白、角丸などは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="highlight-selected-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="highlight-selected-radio-button_title">
配送方法を選択
</div>
<!-- ラジオボタンの動作を説明する文章 -->
<p class="highlight-selected-radio-button_text">
選択中の項目だけ背景色・枠線・文字色が強調表示されます。
</p>
<!-- ラジオボタン一覧 -->
<div class="highlight-selected-radio-button_list">
<!-- 通常配送の選択項目 -->
<div class="highlight-selected-radio-button_item">
<!-- 通常配送を選択するラジオボタン -->
<input
class="highlight-selected-radio-button_input"
id="delivery-normal"
type="radio"
name="delivery"
value="normal">
<!-- 通常配送の選択ラベル -->
<label
class="highlight-selected-radio-button_label"
for="delivery-normal">
<!-- 選択状態を表す丸印 -->
<span class="highlight-selected-radio-button_mark"></span>
<!-- 通常配送の項目名 -->
<span class="highlight-selected-radio-button_name">
通常配送
</span>
</label>
</div>
<!-- お急ぎ便の選択項目 -->
<div class="highlight-selected-radio-button_item">
<!-- お急ぎ便を初期選択するラジオボタン -->
<input
class="highlight-selected-radio-button_input"
id="delivery-express"
type="radio"
name="delivery"
value="express"
checked>
<!-- お急ぎ便の選択ラベル -->
<label
class="highlight-selected-radio-button_label"
for="delivery-express">
<!-- 選択状態を表す丸印 -->
<span class="highlight-selected-radio-button_mark"></span>
<!-- お急ぎ便の項目名 -->
<span class="highlight-selected-radio-button_name">
お急ぎ便
</span>
</label>
</div>
<!-- 日時指定便の選択項目 -->
<div class="highlight-selected-radio-button_item">
<!-- 日時指定便を選択するラジオボタン -->
<input
class="highlight-selected-radio-button_input"
id="delivery-date"
type="radio"
name="delivery"
value="date">
<!-- 日時指定便の選択ラベル -->
<label
class="highlight-selected-radio-button_label"
for="delivery-date">
<!-- 選択状態を表す丸印 -->
<span class="highlight-selected-radio-button_mark"></span>
<!-- 日時指定便の項目名 -->
<span class="highlight-selected-radio-button_name">
日時指定便
</span>
</label>
</div>
<!-- 店舗受け取りの選択項目 -->
<div class="highlight-selected-radio-button_item">
<!-- 店舗受け取りを選択するラジオボタン -->
<input
class="highlight-selected-radio-button_input"
id="delivery-store"
type="radio"
name="delivery"
value="store">
<!-- 店舗受け取りの選択ラベル -->
<label
class="highlight-selected-radio-button_label"
for="delivery-store">
<!-- 選択状態を表す丸印 -->
<span class="highlight-selected-radio-button_mark"></span>
<!-- 店舗受け取りの項目名 -->
<span class="highlight-selected-radio-button_name">
店舗受け取り
</span>
</label>
</div>
</div>
<!-- 選択方法を案内する補足文 -->
<p class="highlight-selected-radio-button_note">
別の項目をクリックすると強調表示が切り替わり、常に1つだけ選択できます。
</p>
</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:36px;
36pxは全体の内側余白です。値を大きくすると余白が広くなります。
gap:16px;
16pxは各ラジオボタン項目の間隔です。値を変更すると項目同士の余白が変わります。
min-height:62px;
62pxは各項目の高さです。値を大きくするとクリック・タップしやすい高さになります。
transition:0.2s;
0.2秒で背景色・枠線・文字色・丸印が切り替わります。値を大きくするとゆっくり、小さくすると素早く切り替わります。
border-radius:18px;
18pxは全体カードの角丸です。値を大きくすると丸みが強くなります。
border-radius:14px;
14pxは各ラジオボタン項目の角丸です。値を変更すると項目の丸みが変わります。
width:22px;
height:22px;
22pxはラジオボタン外側の丸印のサイズです。値を変更すると丸印の大きさが変わります。
width:10px;
height:10px;
10pxは選択時に表示される内側の丸印のサイズです。値を変更すると選択マークの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、およびmedia queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、画面幅に応じて余白や文字サイズを自動調整します。
コメント