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

CSSラジオボタンのカスタマイズ例CSS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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;でデフォルトのラジオボタンのスタイルをリセットし、widthheightでサイズを指定しています。

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"]positionabsoluteにし、opacity0にしてラジオボタンを隠しています。

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

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

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

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

まとめ

どんなデザインやレイアウトでも実現できるのが、CSSラジオボタンの魅力です。

この記事では、CSSラジオボタンの作り方、使い方、応用方法を初心者目線で丁寧に解説しました。

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

これで、あなたもCSSラジオボタンを簡単にマスターできるはず!