プログラミング初心者の勉強ブログ #87
Railsのform_withやform_tagなどで実装した「radio_button」のデフォルトデザインを変える方法を紹介します。３つのポイントを理解することで、簡単にラジオボタンのデザインを変更できます。実際に作成したコードをもとに解説していきます。
目次
[toc]
実装内容
Railsアプリ内で、form_withのradio_buttonを使い、上の画像のような「カテゴリーを選択」を作成する。
ラジオボタンデザイン変更の3つのポイント
ラジオボタンのデザイン変更は3つのポイントをおさえることで、簡単に行えます。
- <input type=”radio”>で表示されるデフォルトラジオボタンは隠す
- <label>タグを利用してデザインを作成する
- 「:checked + label」の使い方をマスターする
デフォルトのラジオボタンは「display: none;」で表示させず、紐付けた<label>タグにCSSでデザインを作って表示させます。その際のCSSのプロパティが少し独特で「:checked」という擬似要素の使い方をしっかりと知っておかなければならない、という話です。
１、デフォルトラジオボタンを隠す
デザイン変更にあたって、まずは<input type=”radio”>で表示されるデフォルトのボタンを「display: none;」で隠します。
form.html.erb
<div class="field">
<%= form_with(model: @blog, local: true) do |form| %>
<%= form.label 'カテゴリーを選択' %>
<%= form.radio_button :category, 'ゲーム', class: "radio_btn" %>
<%= form.radio_button :category, 'ビジネス', class: "radio_btn" %>
<%= form.radio_button :category, 'くらし', class: "radio_btn" %>
# 省略
<% end %>
</div>
style.css
.field .radio_btn {
display: none;
}
※ちなみに、ラジオボタンの仕組みについて少し触れると、
<%= form.radio_button :category, 'ゲーム', class: "radio_btn" %>
上のコードは、Blogモデル内の「category」というカラムと連携しており、チェックが入った状態でパラメーターが送信されると、「ゲーム」という文字列がblogsテーブルのcategoryカラムに保存されます。
２、labelタグでデザインを作成する
次に、隠したラジオボタンとlabelタグを紐付け、デザインを作成します。
紐付けは、ラジオボタン側の「id」とラベル側の「for」という属性で行うことができます。
form.html.erb
<div class="field">
<%= form_with(model: @blog, local: true) do |form| %>
<%= form.label 'カテゴリーを選択' %>
// idを追加
<%= form.radio_button :category, 'ゲーム', class: "radio_btn", id: 'game' %>
// idと同じ値を入れたforを付け、ラベルを作成
<%= form.label 'ゲーム', for: 'game' %>
<%= form.radio_button :category, 'ビジネス', class: "radio_btn", id: 'business' %>
<%= form.label 'ビジネス', for: 'business' %>
<%= form.radio_button :category, 'くらし', class: "radio_btn", id: 'life' %>
<%= form.label 'くらし', for: 'life' %>
# 省略
<% end %>
</div>
これでラベルをクリックすることで、ラジオボタンにチェックが入ります。隠したラジオボタンの「display: none;」を一回といてみると下のようになっていると思います。
※「ゲーム」がlabelタグ
あとはlabelをCSSで加工するだけです。ラジオボタン側の「id」とラベル側の「for」で紐付ける点だけ覚えておけば簡単です。
３、「:checked + label」でlabelを装飾
labelの装飾を行うにあたって、
- ラジオボタンにチェックが入っているとき
- ラジオボタンにチェックが入っていないとき
の2パターンをそれぞれ作成することになります。そこで利用するのが「:checked」という擬似要素です。
style.css
.field .radio_btn {
display: none;
}
// チェックが入っていないとき
.field .radio_btn + label {
display: inline-block;
box-sizing: border-box;
font-size: 14px;
font-weight: normal;
color: #888;
border: solid 1px #EDBC6C;
border-radius: 5px;
margin-top: 10px;
padding: 3px 10px;
background-color: #fff;
cursor: pointer;
}
// チェックが入ったとき
.field .radio_btn:checked + label {
color: #fff;
background-color: #EDBC6C;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
ラジオボタンに紐付けたラベルにCSSを当てる場合、上のように「+ label」を使用します。「+」はセレクタに指定した要素の「次の要素」に対しCSSを反映させます。したがってこのようにCSSをかく場合、ラジオボタンとラベルのコードの位置関係が大事になります。
<%= form.radio_button :category, 'ゲーム', class: "radio_btn", id: 'game' %> <%= form.label 'ゲーム', for: 'game' %>
必ず「ラジオボタン→ラベル」の順でコードを書きます。「上にラジオ、下にラベル」です。
これでクリックに反応してlabelのデザインが切り替わります。
beforeなどの擬似要素を使えば更に凝ったデザインも可能です。
まとめ
ラジオボタンとほとんど同じ要領で「チェックボックス」もデザイン変更が可能です。仕組みを頭に入れておくことで、いろいろな場面で応用ができる（特に擬似要素の使い方）ので、覚えていて損はないと思います。
以上ありがとうございました。