HTML・CSS・JavaScriptで作るラジオボタンの基本と応用テクニック

ラジオボタンは、複数の選択肢から1つだけを選ばせるための定番UIコンポーネントです。フォーム作成の中でも特に使用頻度が高く、ユーザーにとっても直感的に使いやすい要素です。しかし、見た目のカスタマイズやJavaScriptとの連携方法については意外と知られていません。本記事では、HTMLでの基本的なマークアップから、CSSでのデザインカスタマイズ、JavaScriptを使った動的処理まで、ラジオボタンの使い方を詳しく解説します。初心者の方にもわかりやすく丁寧に説明しますので、ぜひ参考にしてみてください。

HTMLでの基本的なラジオボタンの作り方

ラジオボタンは、<input type="radio">タグを使って作成します。同じname属性を持つ複数のラジオボタンの中で、1つだけ選択できます。

<form>
  <p>性別を選択してください：</p>
  <label><input type="radio" name="gender" value="male"> 男性</label><br>
  <label><input type="radio" name="gender" value="female"> 女性</label><br>
  <label><input type="radio" name="gender" value="other"> その他</label>
</form>

このように記述することで、「男性」「女性」「その他」のうち1つのみ選択できるラジオボタンが完成します。

CSSでラジオボタンをカスタマイズする方法

HTMLだけではラジオボタンの見た目はブラウザ依存で味気ないものです。CSSを使って見た目を整えていきましょう。

<style>
  input[type="radio"] {
    display: none;
  }

  label {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #007BFF;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    color: #007BFF;
    font-weight: bold;
  }

  input[type="radio"]:checked + label {
    background-color: #007BFF;
    color: white;
  }
</style>

<form>
  <input type="radio" id="option1" name="option" value="1">
  <label for="option1">選択肢1</label>

  <input type="radio" id="option2" name="option" value="2">
  <label for="option2">選択肢2</label>

  <input type="radio" id="option3" name="option" value="3">
  <label for="option3">選択肢3</label>
</form>

上記のようにラジオボタン自体を非表示にし、labelをボタン風にデザインすることで、ユーザーにとって視認性の高いUIを実現できます。

JavaScriptで選択された値を取得・表示する方法

フォーム送信時や、リアルタイムに選択された値を取得したい場合にはJavaScriptが活躍します。

<script>
  const radios = document.querySelectorAll('input[name="option"]');
  radios.forEach(radio => {
    radio.addEventListener('change', () => {
      const selected = document.querySelector('input[name="option"]:checked');
      document.getElementById('output').textContent = `選択された値は: ${selected.value}`;
    });
  });
</script>

<div id="output"></div>

このようにイベントリスナーを使用することで、ユーザーの選択に応じて画面に値を動的に表示できます。

ラジオボタンとフォーム送信の関係

ラジオボタンを使ってフォーム送信する場合、選択されているボタンのvalueだけが送信されます。選択がない状態で送信されると、そのnameに該当する値は送られません。

<form action="/submit" method="post">
  <input type="radio" id="yes" name="agree" value="yes">
  <label for="yes">はい</label>

  <input type="radio" id="no" name="agree" value="no">
  <label for="no">いいえ</label>

  <button type="submit">送信</button>
</form>

フォームの受け取り側で「agree」の値が「yes」または「no」で送られてくることになります。

よくあるトラブルと対処法

トラブル1：複数選択できてしまう

原因： name属性がそれぞれ異なっている。
対処法： ラジオボタンは同じname属性を持たせてグループ化しましょう。

トラブル2：選択値が取れない

原因： JavaScriptのセレクターが間違っているか、イベントが設定されていない。
対処法： querySelector('input[name="○○"]:checked')の形式を確認。

トラブル3：ラベルをクリックしても反応しない

原因： for属性とinputのidが一致していない。
対処法： label for="○○"とinput id="○○"を対応させましょう。

ラジオボタンを使ったUIの応用例

ラジオボタンは投票機能、アンケート、設定画面などでよく使用されます。

例：アンケートフォーム

<form>
  <p>サイトの使いやすさについて教えてください：</p>
  <label><input type="radio" name="feedback" value="great"> とても使いやすい</label><br>
  <label><input type="radio" name="feedback" value="good"> 使いやすい</label><br>
  <label><input type="radio" name="feedback" value="normal"> 普通</label><br>
  <label><input type="radio" name="feedback" value="bad"> 使いづらい</label><br>
</form>

結果を集計してグラフにするなど、JSとの組み合わせでさらに活用の幅が広がります。

まとめ

ラジオボタンは、HTMLで簡単に導入でき、CSSで自由にデザイン可能、そしてJavaScriptで動的に活用できる便利なUI要素です。基本を押さえておけば、ユーザーにとって使いやすいフォームやインターフェースを作成できます。シンプルながらも奥が深いラジオボタンを、自分のWeb制作にぜひ取り入れてみてください。

タイトルとURLをコピーしました