【初心者向け】凝ったHTMLオプションボタンの簡単な作り方！

こんにちは、ユミクソンです。今回は「HTMLのオプションボタン」の作り方をご紹介します。

Webサイトの問い合わせフォームや、アンケート等で利用した事があるのではないでしょうか？例えば「ダイレクトメールをご希望ですか？」という質問に対して「◉はい」「◉いいえ」を選択する時にクリックする丸の部分ですね。

と思っている方、確かにもうちょっと詳しい情報が欲しいですよね。ご安心ください、この記事の最後には属性のちゃんとした理解、なおかつCSSで少し凝ったデザインの応用もできる様になる筈です！

オプションボタン実例

それではまず最初にオプションボタンがどんな風に機能するか、実際に見て見ましょう。こちらはCSSは使用していない、HTMLのみ使用の基本的なバージョンです。

See the Pen
HTMLオプションボタン by Yumi (@yumixon)
on CodePen.

実例を見てお気づきの方もいるかもしれませんが、オプションボタンには大きく分けて2種類あります。

1. ラジオボタン　… 選択肢の中から一つしか選択ができないので、「複数選択」はできません。ちなみに名前の由来は昔のカーラジオで、ボタンを押すと一つ前に押してあったボタンが自動的に元に戻る、「常に一つしかボタンが押せない」という特徴を表している言われています。
2. チェックボタン　… ラジオボタンとは対照的に、選択肢の中から同時に複数の選択が可能です。冒頭でも記述した様に「アンケート」でよくみる仕組みですね。

それではどのように設定するか具体的に見ていきましょう。

inputタグ

ラジオボタン（＝“radio”）やチェックボックス（=“checkbox”）は、inputタグの数あるtype属性のうちの一つです。inputタグは問い合わせフォームなどで、ユーザーにテキストの入力やボタンでの選択をしてもらう用途で使い、“radio”の様にtype属性値を指定することによってフォームを構成する部品の役割を変える事ができます。

例えば：

• <input type=“text”>はテキストボックスを表示（デフォルトがこの値なので、特に指定をしない場合はこれが表示されます）
• <input type=“file”>はファイルを選択

ちなみにinputタグは空要素の為、終了タグは必要ありません。

name属性

ラジオボタンの場合

name属性をつける（名称は自由に決められます）ことによってラジオボタンのグループ化ができます。ラジオボタンは「同じグループ内で、一度にチェックできるボタンは一つのみ」です。

この場合右手ボタンも左手ボタンも”kikite”というname属性内にあるので、この二つのボタンは「同じグループに属しているよ」ということになります。よって、“kikite”内で一つしか選べないようになっています。それぞれ違う名称を試しにつけてみると、両方のボタンとも選べてしまい、ラジオボタンが機能しません。

チェックボックスの場合

チェックボックスの場合もname属性を付けますが、ラジオボタンと違い複数選択が可能になります。ブラウザに反映されることもなく、例えば間違って異なった名称を同じ質問のグループ内で付けても機能してしまうため、「なんのためにあるの？」と思ってしまいそうですよね。

nameと次項のvalue属性の名称はセットでデータの受け取り手に伝わります。もし様々な「複数選択可」の質問を作った時に、name属性が適当だとユーザから得た折角の情報を受け取り手が理解できなくなってしまいます。ちゃんと各グループずつ、的確な名前付けをする事を習慣づけましょう。

value属性

value属性では、入力値の初期値や、要素に与える引数の設定などを行うことができます。value属性で行える操作は、要素によって異なります。

checked属性

checked属性を付けることでユーザがボタンを選択する前から、初期値で既にボタンが選択されている状態を作ります。

required属性

同じグループ内のinputタグ内にrequiredと指定すると、グループ内の値の選択が必須になります。一箇所のみ、もしくは全てのタグに指定しても機能します。

labelタグ（for属性）

label タグのfor属性を使うと、ボタンとラベルを結びつけてくれます。実例を見ていただければ分かりますが、ボタンの代わりに「右手」もしくは「左手」（ラベル）の文字列をクリックしても、選択できるように設定されています。

スマホの小さいスクリーンでボタン部分の小さな丸を指で選択しようとしても、難しい時がありますよね？ラベルを押してもボタン選択が出来るようにする事によって、使いやすさが格段に上がって利用する方は助かるタグです。

CSSで装飾

CSSを使って少し凝ったオプションボタンを作ることも可能です。まずは実例を見てみましょう。

See the Pen
ラジオボタン with CSS by Yumi (@yumixon)
on CodePen.

ここから簡単ではありますが、それぞれの部分の解説をしていきます。CSSでの変更を加えるためにHTMLも再構成しています。

この部分はボタンと文字列を整列してくれます。

この設定をする事で既存のボタンが非表示になり、代わりにこれからCSSでデザインするボタンを表示できるように準備しておきます。

ここが実際に表示させたいボタンのデザインをする部分です。

emは「文字列に対して1.25倍」なので、もし文字のサイズを大きくした場合でもそれに合わせて自動的にボタンが1.25倍になる設定です。borderでボタンのもととなる四角の線の太さ、線のタイプ、色を設定。そしてborder-radiusを50％にする事で四角を丸に変更します。

box-sizing: border-box;を指定する事によって、borderやpaddingをwidthやheightの範囲内に含めることができます。

ここではボタンが選択された状態（ボタンの中身）をデザインします。content:””;で内容が前項でデザインした枠のデザイン内に表示されるように設定しwidth: 100%; height: 100%; で枠の設定に対して100％表示されるようにします。（前項で既に2pxのpaddingが設定してあるのでその分の隙間ができるようになっています）

backgroundで好きな色を指定、そしてこれも初期設定が四角になっているのでborder-radius:50%で丸に変更します。ここまでの設定で選択された時の状態がデザインできましたが、このままだと実際は選択されていなくても選ばれている状態が表示されてしまっています。

そこでtransform: scale(0);で色が無い状態を初期設定とし、クリック後にbackgroundで指定した色に変わる動きを次の部分で加えます。

ここでは、ボタンがクリックされた時に前項でデザインした状態を表示する為の設定をします。transform: scale(1);を設定する事によって、前項で指定したtransform: scale(0); の非表示の状態から表示される状態へ変更します。

ゆっくり色がつく、という動きを加えたいのでその為に前項でtransition: transform 0.15s;を加えてあります。これで0.15秒かけて色が変わる設定になります。

まとめ

いかがでしたか？パッと見は難しそうな属性も、それぞれの意味を学ぶと「なるほど！」と思えたのではないでしょうか？CSSでの装飾は参考程度ですが、HTMLを理解して「デザインもちょっと凝ったものにしたい！」と感じたら是非試してみてくださいね。

少しでもHTMLとCSSのスキルアップをお手伝いできれば幸いです。