記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTMLラジオボタンの作成+カスタマイズ方法(サンプルコードつき) 

ラジオボタンの基礎知識、作成する方法を初心者の方向けに紹介。 ラジオボタンの基礎知識、作成方法にプラスし、ラジオボタンに加える事のできる属性、カスタマイズ方法の応用編まで本記事で網羅。サンプルコード付きで実際に手を動かして学ぶことができ、初心者の方にわかりやい内容になっています。

カテゴリ: HTML/CSS

こんにちは!
最近WEB制作をはじめたばかりだけど「そもそもラジオボタンってなに?・・」「ラジオボタンを作成してみたいけどやり方が・・」「ラジオボタンってむずかしそう・・」
そのように考えている、初心者WEB制作者の方も多いのではないでしょうか?
多くのお問い合わせフォームで、ラジオボタンが採用されているので、作成できるようになるとWEB制作の幅が広がるでしょう。
今回は、初心者WEB制作者のかた向けにラジオボタンの作成・カスタマイズ方法を具体的に、サンプルコード付きで解説していきます。

ラジオボタンとは

下記の様なものです。

ラジオボタン↓
男性 女性

1度は見たことがあるのではないでしょうか? 入力フォームの選択ボタンであり、 ラジオボタンは、選択肢の中から「一つだけ」を、選択してもらうボタンです。 これに対して、チェックボックスは複数選択の中から「複数回答可」のボタンです。 下記の様なものです。

チェックボックス↓

1つだけを選択したもらいたい場合に、ラジオボタンは有効です。 ポイントは、選択肢の中から「1つだけを回答」して欲しいのか、「複数回答可」を可能にするのかです。

一つだけを選択してもらいたい具体例

●性別の選択
●支払い方法の選択
●色の選択
などの例の様に、2つ選択されたら矛盾が生じて困る。 1つだけを選択してもらいたい場合に使用します。

ラジオボタンの由来

ラジオボタンの由来は、昔に使われてたラジオからきています。 ラジオには、複数ボタンを押す所がありますが、 一つボタンを押すと、他に押されていたボタンが跳ね上がり、押したボタンの機能のみが有効になり、他のボタンの機能はオフになります。 昔のラジオは、一つの機能しか選べなかったんですね。

ラジオボタンは各ブラウザで表示が違う

ラジオボタンの見た目は、OSやブラウザによって少し違います。 デフォルトのものでは少し小さいので、CSSでカスタマイズする事も可能です。(CSSでカスタマイズについては、後で解説します。)

ラジオボタンの使い方・設置方法

シンプルなラジオボタンを作る方法を解説

よく見られる例として、男女を選択するラジオボタンの、最も簡単な作り方を紹介します。

これを作る↓
男性 女性

HTMLサンプルコード

下記より、タグ・属性について解説していきます。

それぞれのタグ・属性について解説

○inputタグ

お問い合わせフォームなど、ユーザーに何かしらを入力→送信してもらいたい時に、使用するタグです。 type属性と合わせて使用し、様々な入力フォームの型を作成する事ができます。

○type属性

フォームの型の種類を指定する際に使用する属性です。 つまり”radio”を指定すると、ラジオボタンで表示される、 その他のtype属性を指定をすると、違う型のフォームで表示されます。 この様にtype属性”radio”を指定する事で、ラジオボタンを表示できます。

〇〇には、表示したい項目名を記載します。 男性という項目名を表示したければ、〇〇に男性と記載します。

○label属性

フォームの中で、フォーム項目名と構成部品(ラジオボタンなど)を関連付ける属性です。

これを作る↓
男性ラベルなし

HTMLサンプルコード

※解説
基本、ラジオボタン作成の際は、label属性と合わせて使用するようにして下さい。理由は、クリックできる選択範囲が広くなり、ユーザーが使いやすくなる為です。 上記の例として表示は変わりませんが、ラベル属性を使用していない「男性ラベルなし」と表示されたテキスト部をクリックしても、○にチェックマークを入れる事ができません。 しかし、ラベル属性を使用した、「女性ラベルあり」と表示されたテキスト部をクリックすると、○にチェックを入れる事ができます。 ラベル属性を使用することでクリックできる範囲を広げる事ができます。

○name属性

グループの名前を指定する属性です。 性別を選択するラジオボタンであれあれば、「name=”gender”」などと指定する事で、このラジオボタンのグループが、なんのグループなのかを特定でき、情報をプログラム側にも送る事ができます。

○value属性

プログラム側に値を渡す事ができる属性です。 value=”male” と指定する事により、male(男性)という値がプログラム側に渡されます。

この様に、各属性を埋めることで、簡単に表示する事ができます。

様々なタイプのラジオボタンとそれぞれの属性について解説

ここからは少し応用編、ラジオボタンに追加できる他の機能を解説していきます。

最初からどちらかにチェックがついている形のラジオボックスを作る<checked属性>

最初から選択された状態を、作る事ができます。 下記の様な状態です。

HTMLサンプルコード

※解説
最初から選択された状態にしておきたい方に、checkedを入れます。 同じname内(同じグループ内)の1つに、この属性を指定する事で表示できます。

最初からどれかの項目に、フォーカスを当てる事ができる<autofocus属性>

該当部を最初から、自動的にフォーカスさせる事ができます。 下記の様な状態です。

これを作る↓
B C

HTMLサンプルコード

※解説
最初からフォーカスされた状態にしておきたい項目に、autofocusを入れます。 同じname内(同じグループ内)の1つに、この属性を指定する事で表示できます。

最初から項目を選択できない状態にする<disabled属性>

属性が指定された項目は選択不可になります。 Aが選択できない状態になっています。 下記の様な状態です。

これを作る↓
B C

HTMLサンプルコード

※解説
選択不可にしたい項目に、disabledを入れます。 同じname内の1つに、この属性を指定する事で、選択不可にできます。

入力を必須項目にできる<required属性>

入力を必須にする事ができます。 同じname内の1つに、この属性を指定すると、そのグループが入力必須になります。

HTMLサンプルコード

※解説
requiredを指定する事で、 name=”example”が指定されているグループ、 つまり、A,B,Cのどれかにチェックをしなければ、送信する事ができません。

input idとの関連づけをできる<for属性>

これまでは、<label>タグの中に<input>タグを入れてましたが、外にあってもfor属性、idタグで関連つけをすることができます。

これを作る↓

HTMLサンプルコード

for=”gender-select”」と「 id=”gender-select”」の関連付けにより、ラベルが外にあっもチェックマークが入る様になります。
必要に応じて各属性を増やしていく、項目名を変える事により、簡単にカスタマイズする事ができます。

ラジオボタンをCSSで装飾する方法

CSSでボタンを縦並びにするには?

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
label属性にdisplay: blockを指定する事により、label属性をブロック要素にし、縦並びにする事ができます。またお好みに合わせて、marginを指定し幅をとりましょう。

CSSでラジオボタンのデザインを変えよう

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

通常のラジオボタンでは「少し小さい」「円を大きくしたい」「円の枠の色を変えたい」「チェックされた時の色を変えたい」などの場合にカスタマイズはおススメです。

○カスタマイズのポイント

デフォルトのinput要素を非表示にする。 デフォルトのラジオボタンの見た目は変更することはできません。 したがって「デフォルトのラジオボタンを非表示にする」→「オリジナルのラジオボタンを作成する」  といった流れになります。

それではラジオボタンのカスタマイズについて、解説していきます。 下記カスタマイズラジオボタン

これを作る↓

HTMLサンプルコード

CSSサンプルコード

順番に解説していきます。
1.デフォルトのinputを消す。 まずデフォルトのinputタグを消します、消さないとデフォルトのまま表示されてしまうからです。

display: none;で消します。
2.円を作る

position: relativeで円を作成する親positionを決めます。 display: blockで縦並びに。 margin: 5px 0;で前後のスペースを空けます。

span(class=”two”)に、potition: absolute;を指定し円を作成する、子potitionを決めます。 height,widthで円の大きさを決める。 border: solid 2pxで円の線の太さを決め、blueで青色の円を作成。
3、疑似クラスを使い、チェックマークを装飾する。

backgroundで赤色を指定し、大きさ、形を指定していきます。 opacity: 0;を指定します。 チェックされるまでは、チェックマークを表示させたくないからです。

.one input:checked + .two:afterでラジオボタンがチェックされた時、oapcityが1となります、つまりチェックされた時、赤色の円が表示されます。
この様に各色、大きさを変更する事で簡単にカスタマイズできます。 まとめると、デフォルトのinput要素を消す→疑似クラスを使い、チェックマークを装飾する→大きさ、色をお好みに合わせて変える。という流れになります。

まとめ

最後に、ラジオボタンのポイントを簡単にまとめた3点を紹介します。

1.ラジオボタンは、複数選択肢の中から1つだけを選択してもらいたい時に有効
2.type属性、type=”radio”を指定し、あとは必要に応じて、各属性を足してく事で簡単にカスタマイズできる
3.ラジオボタンをカスタマイズするには、デフォルトのinput要素を消す→疑似クラスを使い、チェックマークを装飾する→大きさ、色をお好みに合わせて変える

ラジオボタンは、とてもシンプルですが、多くのお問い合わせフォームでも採用されています。よろしければご活用ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。