ボタン型ラジオボタンを作る方法
ボタン型ラジオボタンをHTMLとCSSだけで作る方法を紹介します。通常の丸いラジオボタンではなく、選択肢全体をボタンとして表示することで、見た目が分かりやすくクリックしやすいUIを実装できます。JavaScriptを使用せず、ラジオボタン本来の動作を維持したままデザインだけを変更できるサンプルです。
このサンプルでは、複数の選択肢をボタンとして横並びに表示し、選択中のボタンだけ色や枠線が変化します。同じname属性を持つラジオボタンを使用しているため、常に1つだけ選択できる仕様です。お問い合わせフォームやアンケート、商品オプション、管理画面など、視認性を高めたい場面に適しています。
項目名や選択肢の追加・削除はHTMLで、ボタンの色、文字サイズ、余白、角丸、枠線、選択時のデザインなどはCSSで自由に変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCのいずれでも利用しやすいボタン型ラジオボタンを作成できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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="button-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="button-radio-button_title">
好きな言語を選択
</div>
<!-- 選択方法を案内する説明文 -->
<p class="button-radio-button_text">
ボタンをクリックすると選択状態が切り替わります。
</p>
<!-- ボタン型ラジオボタン一覧 -->
<div class="button-radio-button_list">
<!-- HTMLの選択項目 -->
<div class="button-radio-button_item">
<!-- HTMLを選択するラジオボタン -->
<input
class="button-radio-button_input"
id="button-radio-button_html"
type="radio"
name="language"
value="html">
<!-- HTMLを選択するボタン型ラベル -->
<label
class="button-radio-button_label"
for="button-radio-button_html">
HTML
</label>
</div>
<!-- CSSの選択項目 -->
<div class="button-radio-button_item">
<!-- CSSを選択するラジオボタン -->
<input
class="button-radio-button_input"
id="button-radio-button_css"
type="radio"
name="language"
value="css">
<!-- CSSを選択するボタン型ラベル -->
<label
class="button-radio-button_label"
for="button-radio-button_css">
CSS
</label>
</div>
<!-- JavaScriptの選択項目 -->
<div class="button-radio-button_item">
<!-- JavaScriptを初期選択するラジオボタン -->
<input
class="button-radio-button_input"
id="button-radio-button_javascript"
type="radio"
name="language"
value="javascript"
checked>
<!-- JavaScriptを選択するボタン型ラベル -->
<label
class="button-radio-button_label"
for="button-radio-button_javascript">
JavaScript
</label>
</div>
<!-- PHPの選択項目 -->
<div class="button-radio-button_item">
<!-- PHPを選択するラジオボタン -->
<input
class="button-radio-button_input"
id="button-radio-button_php"
type="radio"
name="language"
value="php">
<!-- PHPを選択するボタン型ラベル -->
<label
class="button-radio-button_label"
for="button-radio-button_php">
PHP
</label>
</div>
</div>
<!-- ラジオボタンの動作を案内する補足文 -->
<p class="button-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とstyle.cssを配置します。
配置後はsample/index.htmlをブラウザで開くだけで利用できます。
カスタマイズできる内容
index.htmlではラジオボタンの項目名や表示順、選択肢の追加・削除、初期選択する項目を変更できます。style.cssではボタンの背景色、文字色、枠線、角丸、余白、文字サイズ、ボタンサイズ、選択時の色、項目同士の間隔などを自由に調整できます。
数値調整
style.css
max-width:760px
コンテンツ全体の最大横幅です。値を大きくすると表示領域が広くなり、小さくするとコンパクトになります。
padding:32px
コンテンツ全体の内側余白です。値を変更すると余白の広さが変わります。
min-width:140px
ボタンの最小横幅です。値を大きくすると横長のボタンになります。
min-height:52px
ボタンの高さです。値を変更するとボタンの高さが変わります。
gap:16px
ボタン同士の間隔です。値を大きくするとボタン同士のスペースが広がります。
border-radius:18px・12px
コンテナやボタンの角丸です。値を大きくすると丸みが強くなります。
font-size:22px・16px
タイトルやボタン、説明文の文字サイズです。値を変更すると文字の大きさが変わります。
transition:0.3s
ボタンの色が切り替わる時間です。0.3秒でアニメーションします。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
style.cssではwidth:100%、max-width、flex-wrap、media queryを使用しています。PCではボタンを横並びで表示し、スマートフォンではボタンを縦方向へ並べるため、PC・タブレット・スマートフォンのいずれでも見やすく利用できます。
コメント