CSSラジオボタンのカスタマイズガイド！初心者でも簡単ステップで作れる！

※本ページはプロモーションが含まれています。

本記事の内容

初心者向け

(3)

利用頻度

(3.5)

難易度

(4)

ハック君

編集長(・vv・) CSSについて下記の内容が分かりません？？？
教えて下さい（ ; ; ）

・ラジオボタンのカスタマイズ方法
・チェックボックスのカスタマイズ方法
・ラジオボタン、チェックボックスの使い分け

UIHACK 編集長

ハック君(^ ^)質問ありがとう♪

・ラジオボタンをCSSでカスタマイズする方法
・チェックボックスをカスタマイズ方法する方法
・ラジオボタン、チェックボックスの使い分け

上記を説明するね(￣^￣)ゞ

本記事では、CSSの初心者でも簡単に活用できるラジオボタンの使い方やカスタマイズ方法を詳しく解説します。ラジオボタンは、選択肢の中から一つだけを選ぶ際に使われるUI要素であり、お問い合わせフォームやアンケートなど様々な場面で利用されています。

最初に基本的なCSSラジオボタンの作り方から始めます。ラジオボタンを表示させるHTMLの要素や、CSSを使って見た目をカスタマイズする方法を丁寧に解説します。初心者の方でもわかりやすいように、具体的なコード例やスニペットも豊富に用意しましたので、手を動かしながら実際に試してみてください。

この記事を読むことで、CSSラジオボタンの基本的な使い方を理解し、自分自身のWebサイトに活用できるようになります。初心者の方でも取り組みやすい内容ですので、ぜひご覧ください。

ラジオボタンをCSSでおしゃれにカスタマイズしよう！
まずは、ラジオボタンの基本的なHTMLをご紹介！
CSS ラジオボタンのカスタマイズ例
1. ラジオボタンをCSSでカラフルにカスタマイズ
2. ラジオボタンをシンプルにモノトーンで、汎用性が高いデザインにカスタマイズ
チェックボックスの基本的なHTMLをご紹介！
CSS チェックボックスのカスタマイズ例
1. CSS チェックボックスのレ点の色とサイズ変更
2. CSS クリック時のトグルスイッチ風デザインを持つチェックボックスの作成方法
ラジオボタンとチェックボックスの使い分けについて解説します
css ラジオボタン

ラジオボタンをCSSでおしゃれにカスタマイズしよう！

それでは、ラジオボタンをCSSでおしゃれにカスタマイズする方法を紹介します。
CSSを使って独自のスタイルを適用することで、デフォルトの見た目を一新し、ウェブサイトやアプリケーションに個性的なデザインを加えることができます。

ハック君

編集長(・vv・) よろしくお願いします！
最初は、基礎的な内容で、その後にカスタマイズする方法を教えて下さいよ！

UIHACK 編集長

了解！以下に基本的なラジオボタンのHTMLとCSSのサンプルコードを紹介するよ

まずは、ラジオボタンの基本的なHTMLをご紹介！

ご飯焼飯天津飯

UIHACK 編集長

上記は、”ご飯”、”焼飯”、”天津飯”という3つの選択肢を持つラジオボタングループを作成しています。
以下に各行の詳細を説明します。

ラジオボタンとラベルを含む要素をグループ化

<div class="radio-group">

UIHACK 編集長

この行では、ラジオボタンとラベルを含む要素をグループ化するためにradio-groupというクラスを持つdiv要素を作成しています。このクラスはCSSでスタイルを適用する際に使用されます。

最初のラジオボタンを定義

<input type="radio" id="radio1" name="color" value="red">
<label for="radio1">ご飯</label>

UIHACK 編集長

これらの行では、最初のラジオボタンを定義しています。input要素のtype属性をradioに設定することで、ラジオボタンを作成しています。id属性はラジオボタンを一意に識別するためのものであり、ラベルとの関連付けに使用されます。name属性はラジオボタングループを識別するためのものであり、同じname属性を持つラジオボタンがグループとして扱われます。value属性はラジオボタンが選択された場合に送信される値を定義します。

label要素はラジオボタンのテキストラベルです。for属性はラベルを関連付けるラジオボタンのid属性と対応させるために使用されます。これにより、ラベルをクリックすると対応するラジオボタンが選択されます。

同様に、2番目、3番目のラジオボタンとそのラベルを定義しています。

<input type="radio" id="radio2" name="color" value="blue">
<label for="radio2">焼飯</label>

<input type="radio" id="radio3" name="color" value="green">
<label for="radio3">天津飯</label>

ハック君

このコードは、2番目、3番目のラジオボタンとそのラベルを定義してると思うんですよ。ただ、STEP1のラジオボタンとid属性とfor属性の値が何故違うんですか(ｏ･ω･ｏ）ﾎｴ?

UIHACK 編集長

いい所に、気づいたね！選択されたラジオボタンの値は、例えばお問い合わせフォームの送信時にサーバーに送信されるか、JavaScript、phpなどで取得することも出来るのでユニークな値（重複しない）を使用してるんだよ！

完成！！！

<div class="radio-group">
  <input type="radio" id="radio1" name="option" value="option1">
  <label for="radio1">Option 1</label>

  <input type="radio" id="radio2" name="option" value="option2">
  <label for="radio2">Option 2</label>

  <input type="radio" id="radio3" name="option" value="option3">
  <label for="radio3">Option 3</label>
</div>

UIHACK 編集長

最後に、今回説明したHTMLコードをまとめとくね。

これらのコードを使用すると、3つのラジオボタンが表示され、ユーザーは「ご飯」「焼飯」「天津飯」のいずれかを選択することができます。選択されたラジオボタンの値は、フォームの送信時にサーバーに送信されるか、JavaScriptで取得することができます。

CSS ラジオボタンのカスタマイズ例

ハック君

基本的な実装方法は分かったかも(・・∂) ｱﾚ?

UIHACK 編集長

本当？また質問があったら聞いてよ(^∇^)
では、ラジオボタンのカスタマイズ方法を説明するね！

ラジオボタンをCSSでカラフルにカスタマイズ

HTMLコードの説明

<div class="radio-group">
  <input type="radio" id="radio1" name="color" value="red">
  <label for="radio1">ご飯</label>

  <input type="radio" id="radio2" name="color" value="blue">
  <label for="radio2">焼飯</label>

  <input type="radio" id="radio3" name="color" value="green">
  <label for="radio3">天津飯</label>
</div>

UIHACK 編集長

<div class=”radio-group”> : ラジオボタンをグループ化するためのdiv要素です。

<input type=”radio” id=”radio1″ name=”color” value=”red”> : ラジオボタンの要素です。id属性はラベルと関連付けるために使用され、name属性はグループ内で一意の名前を指定します。value属性はラジオボタンが選択されたときに送信される値を定義します。

<label for=”radio1″>ご飯<label> : ラジオボタンに対応するテキストラベルです。for属性はラベルを関連付けるラジオボタンのid属性と対応させるために使用されます。

CSSコードの説明

UIHACK 編集長

.radio-group input[type=”radio”] : ラジオボタンのスタイルをリセットするためのセレクタです。外観をデフォルトのスタイルから変更します。
.radio-group input[type=”radio”]:checked : 選択された状態のラジオボタンに適用されるスタイルです。背景色とボーダーカラーが変更されます。
.radio-group label : ラベル要素のスタイルを指定するためのセレクタです。右側に余白を設定し、カーソルをポインターに変更します。
.radio-group label:hover : ラベル要素にホバーエフェクトを追加するためのセレクタです。ホバー時に下線を表示します。

ラジオボタンをシンプルにモノトーンで、汎用性が高いデザインにカスタマイズ

HTMLコードの説明

<div class="radio-group">
  <input type="radio" id="radio1" name="color" value="red">
  <label for="radio1">ご飯</label>

  <input type="radio" id="radio2" name="color" value="blue">
  <label for="radio2">焼飯</label>

  <input type="radio" id="radio3" name="color" value="green">
  <label for="radio3">天津飯</label>
</div>

UIHACK 編集長

<div class=”radio-group”> : ラジオボタンをグループ化するための要素です。ラジオボタンはこの要素内に配置されます。

<input type=”radio” id=”radio1″ name=”color” value=”red”> : ラジオボタンの1つ目のオプションです。id 属性はラベルと紐付けるために使用され、name 属性は同じグループ内のラジオボタンを識別するために使用されます。
<label for=”radio1″>ご飯</label> : ラジオボタンの1つ目のオプションに対応するラベルです。for 属性はラジオボタンと紐付けるために使用され、id 属性と同じ値を指定します。ユーザーがこのラベルをクリックすると、対応するラジオボタンが選択されます。

CSSの説明

.radio-group input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 30px;
  height: 30px;
  border: 2px solid #b2b2b2;
  border-radius: 50%;
  outline: none;
  background-color: #ccc;
  cursor: pointer;
}

/* ラジオボタンのカスタムスタイル */
.radio-group input[type="radio"]:checked {
  background-color: rgb(108 108 108);
}

/* ラベルのスタイル */
.radio-group label {
  margin-right: 10px;
  cursor: pointer;
}

/* ラベルにホバーエフェクトを追加 */
.radio-group label:hover {
  text-decoration: underline;
}

ハック君

成程！このコードは、ラジオボタンの背景やクリックした時の色をカスタマイズしてると思うんですけど
どのコードでしてるんですか。

UIHACK 編集長

ナイスアシストΣ(,,ºΔº,,*)以下三点やね！

.radio-group input[type=”radio”]:checked：background-color: rgb(108 108 108);でラジオボタンの背景を変化

.radio-group input[type=”radio”]:checked : 選択された状態のラジオボタンに対して適用されるスタイルを指定するセレクタです。このセレクタでは、選択されたラジオボタンの背景色が変更されます。

.radio-group label:hover : ラベル要素にホバーエフェクトを追加するためのセレクタです。ユーザーがラベルにマウスを重ねると、テキストに下線が表示されます。

チェックボックスの基本的なHTMLをご紹介！

ハック君

編集長(・vv・) 次は、チェックボックスについての解説でしたっけ(ｏ･ω･ｏ）ﾎｴ?

UIHACK 編集長

そうそう！まずは基本的なチェックボックスから説明するよ♪
以下に記載していくね！

UIHACK 編集長

<div class=”checkbox-group”>：チェックボックスをグループ化するためのdiv要素です。この要素により、関連するチェックボックスとラベルがまとめられます。

<input type=”checkbox” id=”checkbox1″ name=”option1″ value=”1″>：チェックボックスを作成するためのinput要素です。type属性が”checkbox”に設定されており、id属性やname属性、value属性が指定されています。
Option 1

<label for=”checkbox1″>餃子<label>：チェックボックスに関連するラベルを作成するためのlabel要素です。for属性がチェックボックスのid属性と対応しており、テキストとして”餃子”が表示されます。

ハック君

おお！同じように、2つ目と3つ目のチェックボックスも同じような構成で作成されているんですね。

UIHACK 編集長

その通り！それぞれのチェックボックスとラベルは、グループ化された<div class=”checkbox-group”>内に配置されています。

このHTMLコードにより、3つのチェックボックスとそれに関連するラベルが表示されます。各チェックボックスは一意のid属性を持ち、ラベルのfor属性と対応しています。これにより、ユーザーがラベルをクリックすると、対応するチェックボックスが選択/解除されます。

CSS チェックボックスのカスタマイズ例

ハック君

編集長(・vv・) チェックボックスの基礎的な事は理解しかかも(・・∂) ｱﾚ?
ちょっとカスタマイズした時のアイディア欲しいです。

UIHACK 編集長

OK！そうだったら、チェックボックスをクリックするとレ点が付くんだけど色とサイズをカスタマイズ
してみようか(￣^￣)ゞ

以下に完成系とHTML、CSSの説明を書くね。

CSS チェックボックスのレ点の色とサイズ変更

HTMLの説明

UIHACK 編集長

このHTMLコードでは、チェックボックスをグループ化するために<div class=”checkbox-group”>というクラスを持つ要素を作成しています。
それぞれのチェックボックスは<input>要素で表現され、id属性とname属性が設定されています。また、ラベル要素は<label>で表現され、各チェックボックスと関連付けるためにfor属性が対応するチェックボックスの
id値と同じになるように設定されています。

<div class="checkbox-group">
  <input type="checkbox" id="checkbox1" name="option1" value="1">
  <label for="checkbox1">Option 1</label>

  <input type="checkbox" id="checkbox2" name="option2" value="2">
  <label for="checkbox2">Option 2</label>

  <input type="checkbox" id="checkbox3" name="option3" value="3">
  <label for="checkbox3">Option 3</label>
</div>

CSSの説明

/* チェックボックスのスタイルリセット */
.checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 3px;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

/* チェックボックスのカスタムスタイル */
.checkbox-group input[type="checkbox"]::before {
  content: '13'; /* レ点のUnicodeコードポイント */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: transparent;
  transition: color 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked::before {
  color: #f9a825; /* レ点の色 */
}

UIHACK 編集長

このCSSコードでは、まずチェックボックスのデフォルトのスタイルをリセットしています。appearanceプロパティを使用してネイティブの外観を無効化し、カスタムスタイルを適用します。チェックボックスの幅や高さ、ボーダーのスタイルや背景色などが指定されています。

ハック君

編集長(・vv・) チェックボックスのレ点のカスタムはどの要素でしているんですか。

UIHACK 編集長

::beforeという擬似要素を使用してチェックボックスのカスタムスタイルを追加しています。contentプロパティを使用してレ点のUnicodeコードポイント(\2713)を指定し、チェックボックスの中央に配置されるように位置を調整しています。初期状態では、レ点の色は透明(color: transparent)に設定されています。

最後に、input[type=”checkbox”]:checkedというセレクタを使用してチェックされた状態のチェックボックスに対してカスタムスタイルを適用しています。ここでは、レ点の色を指定しています（例では#f9a825となっています）。

CSS クリック時のトグルスイッチ風デザインを持つチェックボックスの作成方法

ハック君

編集長(・vv・) スマフォ向けのユーザーに向けておすすめのデザイン無いですか。

UIHACK 編集長

あるよ(￣^￣)ゞトグルスイッチ風のカスタマイズ方法を紹介するね！

HTMLコードの説明

<div class="toggle-switch">
  <input type="checkbox" id="toggle" name="toggle">
  <label for="toggle"></label>
</div>

UIHACK 編集長

このコードでは、toggle-switchというクラス名を持つ<div class=”toggle-switch”>の中に<input>と<label>要素が配置されてます。<input>要素のtype属性は“checkbox”となっています。

CSSコードの説明

/* チェックボックスの非表示 */
.toggle-switch input[type="checkbox"] {
  display: none;
}

/* トグルスイッチのスタイル */
.toggle-switch label {
  display: inline-block;
  width: 50px;
  height: 24px;
  border-radius: 12px;
  background-color: #ccc;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* トグルスイッチのボール部分のスタイル */
.toggle-switch label::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

/* チェックされたトグルスイッチのスタイル */
.toggle-switch input[type="checkbox"]:checked + label {
  background-color: #3cba54;
}

/* チェックされたトグルスイッチのボール部分のスタイル */
.toggle-switch input[type="checkbox"]:checked + label::after {
  transform: translateX(26px);
}

ハック君

編集長(・vv・) チェックボックスの原型なくないですか？

UIHACK 編集長

そこが「キモ」なんだよ♪

今回のデザインは、まず要素を非表示にします（display: none;）。
次に、要素にトグルスイッチのベースとなるスタイルを適用します。幅や高さ、ボーダーのスタイルや背景色などが指定されています。

ハック君

(◎_◎) ﾝ?(◎_◎) ﾝ?(◎_◎) ﾝ?
ベースとなる基礎を作ったんですねー

UIHACK 編集長

絶対分かってないよね？？？

次に、<label>要素の::afterという擬似要素を使用して、トグルスイッチのボール部分のスタイルを追加しています。ボール部分はborder-radiusを設定して丸くし、初期状態では左上の位置にあります。

最後に、input[type=”checkbox”]:checked + labelというセレクタを使用して、チェックされた状態のトグルスイッチに対してスタイルを適用しています。チェックされた場合、背景色とボール部分の位置が変化します。

ハック君

成程！クリック時にトグルスイッチが切り替わるデザインのCSSチェックボックスが実装されるんですね！

UIHACK 編集長

そうそう！
簡単にまとめると、以下三点が重要ですね！

1./* チェックボックスの非表示 */

.toggle-switch input[type=”checkbox”] {
display: none;
}

2./* トグルスイッチのボール部分のスタイル */
.toggle-switch label::after {
content: ”;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s ease;
}

3./* チェックされたトグルスイッチのスタイル */
.toggle-switch input[type=”checkbox”]:checked + label {
background-color: #3cba54;
}

ラジオボタンとチェックボックスの使い分けについて解説します

ハック君

ラジオボタンとチェックボックスは、それぞれどんな時に使用するんですか(ｏ･ω･ｏ）ﾎｴ?

UIHACK 編集長

そうだよね！
それぞれの、動作と特性に表にまとめるね♪

	ラジオボタン	チェックボックス
選択方法	複数の選択肢の中から一つだけを選択するための要素です。同じ名前のラジオボタンはグループとして扱われ、その中から一つだけが選択されます。	チェックボックスは、複数の選択肢から複数の項目を選択するための要素です。複数のチェックボックスを同時に選択できます。
動作	排他的な選択肢（Yes / No）的に使用	複数選択肢（ON / OFF）や会員規約の同意など

ハック君

ラジオボタンとチェックボックスは、異なる選択パターンを提供するために使うんですね。
ラジオボタンは単一選択、チェックボックスは複数の選択を可能にする場合に便利なんですねΣ(,,ºΔº,,*)

css ラジオボタン

CSSラジオボタンは、Webデザインにおいて重要な要素の一つです。ラジオボタンを使うことで、ユーザーに選択肢を提供し、使いやすいフォームを作成することができます。この記事では、CSSを使ったラジオボタンのカスタマイズ方法や活用事例について紹介しました。

もっと洗練されたデザインやインタラクティブな要素を作りたい方には、CSSアニメーションについても学んでみてください。CSSアニメーションを使えば、ラジオボタンの選択時にフェードインやフリップなどの効果を加えることができます。
次は『CSSのアニメーションの作成方法』という記事を読んで、より魅力的なコンテンツを実現してみましょう！

ハック君

以下の記事も参考にしてください。