Bulmaのラジオボタン Radio button [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webの入力フォームでは、ユーザーに選択式の項目を配置することがよくあります。

例えば、性別を選択するものや、支払い方法を選択するものなどです。

項目を選択するコントロールとしては、セレクトボックスとラジオボタンがありますが、選択肢の数が多くない場合は、直感的にわかりやすいのでラジオボタンの方が適しています。

Bulmaにはラジオボタンのスタイルを設定するクラスが用意されています。

今回はラジオボタンをスタイリングするradioクラスを紹介します。

ラジオボタンのスタイルを設定するradioクラス

radioクラスは、ラジオボタンをラップするコンテナです。
HTMLでのラジオボタンは、「input type=”radio”」で記述しますが、このinput要素に指定するのではなく、input要素の親となる要素を配置して、そこにクラスを指定します。

HTML

ここではinput要素の親要素にlabel要素を使用して、label要素のclass属性にradioクラスを指定しています。
ラジオボタンでは、何らかのテキスト(ラベル)を配置する場合が多いので、radioクラスはほとんどの場合、label要素のクラスとして指定することになります。

ブラウザーでの表示

Bulmaのradioクラスの実装サンプルをブラウザーで実行した結果

Bulmaでは、クロスブラウザの互換性とユーザーエクスペリエンスを維持することを考慮し、意図的にスタイルが設定されていません。(これはチェックボックスと同様です。)ですので、radioクラスを使用したラジオボタンのスタイルは非常にシンプルなものになっています。

ボタンやテキストボックスなど、他のコントロールのスタイルを設定するクラスでは、色やサイズなどの様々なオプションの指定が可能となっていますが、ラジオボタンでは設定できるオプションが用意されていません。

ボタンが選択されている状態では、次のような表示になります。

Bulmaのradioクラスの実装サンプルをブラウザーで実行した結果

HTML

disabled属性を指定してラジオボタンを無効な状態にすると、次のような表示になります。

Bulmaのradioクラスの実装サンプルをブラウザーで実行した結果

HTML

3番目(一番右)のラジオボタンを無効にしています。

Bulma 入門 Tips 一覧