【CSS】ラジオボタン完全解説！作り方、使い方、応用方法からサンプルコードまで初心者でも簡単マスター！

はじめに
●CSSラジオボタンとは？
●CSSラジオボタンの作り方
●CSSラジオボタンの使い方と応用方法
まとめ

はじめに

CSSラジオボタンの作り方、使い方、応用方法について徹底解説します。

この記事では、初心者でも簡単にマスターできるよう、丁寧に説明しています。

さらに、サンプルコードや応用例も掲載していますので、ぜひ参考にしてください。

●CSSラジオボタンとは？

CSSラジオボタンは、ウェブページ上で選択肢を表示し、ユーザーが1つだけ選ぶことができる入力要素です。

HTMLでラジオボタンを作成し、CSSでデザインをカスタマイズすることができます。

ここでは、CSSラジオボタンの基本的な作り方と使い方を説明します。

●CSSラジオボタンの作り方

まずは、HTMLでラジオボタンを作成する方法を見ていきましょう。

次のようなコードをHTMLファイルに記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSラジオボタンの作り方</title>
</head>
<body>
  <form>
    <input type="radio" name="example" id="option1">
    <label for="option1">選択肢1</label>

    <input type="radio" name="example" id="option2">
    <label for="option2">選択肢2</label>
  </form>
</body>
</html>

このコードでは、<input type="radio">タグでラジオボタンを作成し、<label>タグでラジオボタンに対応するテキストを表示しています。

name属性は同じ名前を持つラジオボタンのグループを作成し、id属性はラベルとラジオボタンを関連付けるために使用されます。

この例では、2つのラジオボタンが同じグループに属しているため、ユーザーは1つだけ選択できます。

次に、CSSでラジオボタンのデザインをカスタマイズする方法を見ていきましょう。

次のようなコードをHTMLファイルの<head>タグ内に記述します。

<style>
  input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: #eee;
    border-radius: 50%;
    outline: none;
  }

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

このコードでは、まずappearance: none;でデフォルトのラジオボタンのスタイルをリセットし、widthとheightでサイズを指定しています。

border-radius: 50%;でラジオボタンの形状を円にしています。最後に、:checked疑似クラスを使って選択されたラジオボタンの背景色を変更しています。

これで、簡単なCSSラジオボタンが作成できました。

次に、使い方や応用方法を見ていきましょう。

●CSSラジオボタンの使い方と応用方法

CSSラジオボタンは、さまざまな場面で活用できます。

ここでは、いくつかの応用例とサンプルコードを紹介します。

ラジオボタンのラベルをデザインする

ラジオボタンのラベルにもCSSを適用して、見た目をより魅力的にすることができます。

下記のようなコードを追加してみましょう。

<style>
  /* 既存のコード */
  label {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-left: 5px;
  }

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

このコードでは、labelタグに対してフォントサイズ、太さ、色を設定し、ラジオボタンとの間に余白を追加しています。

また、:checked + labelセレクタを使って、選択されたラジオボタンに対応するラベルの色を変更しています。

ラジオボタンを横並びにする

ラジオボタンを横並びに表示するには、次のようなコードを追加します。

<style>
  /* 既存のコード */
  form {
    display: flex;
  }

  input[type="radio"] + label {
    margin-right: 20px;
  }
</style>

このコードでは、formタグに対してdisplay: flex;を設定することで、子要素（ラジオボタンとラベル）が横並びになるようにしています。

また、input[type="radio"] + labelセレクタを使って、ラジオボタンとラベルの間に余白を追加しています。

ラジオボタンを隠してカスタムデザインを適用する

デフォルトのラジオボタンを完全に隠し、独自のデザインを適用することもできます。

次のようなコードを追加してみましょう。

<style>
  /* 既存のコード */
  input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  input[type="radio"] + label {
    padding-left: 30px;
    position: relative;
  }

  input[type="radio"] + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #eee;
    border-radius: 50%;
  }

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

このコードでは、まずinput[type="radio"]のpositionをabsoluteにし、opacityを0にしてラジオボタンを隠しています。

次に、input[type="radio"] + labelに対して、左側に余白を追加し、position: relative;を設定しています。

そして、input[type="radio"] + label::beforeセレクタを使って、独自のデザインを持つラジオボタンを作成しています。

最後に、選択されたラジオボタンに対応するカスタムデザインの背景色を変更しています。

これらの応用例を参考に、CSSラジオボタンを自由にカスタマイズしてみてください。