運用型広告
Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。
Web制作
CSSだけでボタン風のラジオボタンを作る方法
今回はボタン風のラジオボタンをCSSだけで作る方法を紹介します。
コード
コードはこんな感じです
<div class="radiobox">
<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
<label for="radio1">ラジオボタン1</label>
<input id="radio2" class="radiobutton" name="hoge" type="radio" value="ラジオボタン2" />
<label for="radio2">ラジオボタン2</label>
<input id="radio3" class="radiobutton" name="hoge" type="radio" value="ラジオボタン3" />
<label for="radio3">ラジオボタン3</label>
</div>.radiobutton {
display: none;
}
label {
background-color: skyblue;
padding: 10px 20px;
}
.radiobutton:checked + label {
background-color: pink;
}コードの解説
<input>のidと<label>のfor属性を一致させて紐付けましょう。<input>はdisplay: noneにするのできちんと紐付けしておく必要があります。
ただし、<label>の中に<input>を書いて紐付ける方法だとボタン風のラジオボタンは作れないので注意しましょう。
<input>にチェックが入ったら<label>に処理をするので、中に書いてしまうと階層構造の関係でCSSだけでは実装できなくなります
また、<input>→<label>の順番で書かないとチェックが入った時に処理ができないのでこの順番で書くようにしてください。
あとは<input>と<label>を同じ階層にひらすら並べるだけです。
ラジオボタン本体はdisplay: none;で非表示にします。
<label>に背景色を入れておくとクリックした時の変化がわかりやすいと思います。
.radiobutton:checked + labelはいわゆる隣接セレクタですね。.radiobuttonがチェックされた時の隣にあるlabelにスタイルを当てます。
ボタンをdivで囲む
ここからは好みによりますが、<input>と<label>をただ並べるだけだとバラバラしているので、<div>で囲ってあげるとまとまりのあるコードになります。
<div class="radiobox">
<div class="radiobutton">
<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
<label for="radio1">ラジオボタン1</label>
</div>
<div class="radiobutton">
<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
<label for="radio1">ラジオボタン2</label>
</div>
</div><div>で囲っておくと何かと融通が効きやすいのでオススメです。
まとめ
結構簡単そうですが、<input>と<label>を同じ階層に書くことや、<input>→<label>の順番で書くことは意識しないとハマりポイントになります。
焦っている時ほど変なミスでコードが動かないことはよくあるので注意してくださいね。
Request Materials資料請求
Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。
- ● web広告の改善事例が知りたい方
- ● 現在お願いしている代理店との比較をしたい方
- ● サービスの全体像・料金を知りたい方