ホバーで反応するラジオボタンを作る方法
ホバーで反応するラジオボタンを作る方法を紹介します。ラジオボタンへマウスカーソルを重ねたときに背景色や枠線などが変化することで、クリックできる項目であることを視覚的に分かりやすく伝えられます。お問い合わせフォームや会員登録画面、設定画面など、選択項目を見やすくしたい場面で利用しやすいデザインです。
このサンプルではHTMLとCSSだけを使用し、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>
<!-- ラジオボタンのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ホバーで反応するラジオボタン全体 -->
<div class="hover-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="hover-radio-button_title">
配送方法を選択
</div>
<!-- ホバー時の動作を説明する文章 -->
<p class="hover-radio-button_text">
項目へマウスカーソルを重ねると背景色と枠線が変化します。
</p>
<!-- ラジオボタン一覧 -->
<div class="hover-radio-button_list">
<!-- 通常配送の選択項目 -->
<label class="hover-radio-button_label">
<!-- 通常配送を初期選択するラジオボタン -->
<input
class="hover-radio-button_input"
type="radio"
name="delivery"
value="normal"
checked>
<!-- 通常配送の項目名 -->
<span class="hover-radio-button_name">
通常配送
</span>
</label>
<!-- お急ぎ便の選択項目 -->
<label class="hover-radio-button_label">
<!-- お急ぎ便を選択するラジオボタン -->
<input
class="hover-radio-button_input"
type="radio"
name="delivery"
value="express">
<!-- お急ぎ便の項目名 -->
<span class="hover-radio-button_name">
お急ぎ便
</span>
</label>
<!-- 日時指定便の選択項目 -->
<label class="hover-radio-button_label">
<!-- 日時指定便を選択するラジオボタン -->
<input
class="hover-radio-button_input"
type="radio"
name="delivery"
value="date">
<!-- 日時指定便の項目名 -->
<span class="hover-radio-button_name">
日時指定便
</span>
</label>
<!-- 店舗受け取りの選択項目 -->
<label class="hover-radio-button_label">
<!-- 店舗受け取りを選択するラジオボタン -->
<input
class="hover-radio-button_input"
type="radio"
name="delivery"
value="store">
<!-- 店舗受け取りの項目名 -->
<span class="hover-radio-button_name">
店舗受け取り
</span>
</label>
</div>
<!-- 操作方法を案内する補足文 -->
<p class="hover-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 をブラウザで開くと利用できます。各項目へマウスカーソルを重ねると背景色と枠線が変化し、クリックすると通常のラジオボタンとして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はラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、およびmedia queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、画面幅に応じて余白や文字サイズを自動調整します。
コメント