みなさんこんにちは、ゆうやです！
テレビアニメ「PSYCHO-PASS サイコパス 3」の放送が残り3回となり、「あと3話で話まとまるの！？」とネット上が盛り上がりを見せている今日このごろ、いかがお過ごしでしょうか。
第1期、第2期のOPもかっこよかったですが、今回もしっかりかっちょいいOPに仕上がっているのでぜひ見てみてください(^o^)
- オープニング・テーマ
- Who-ya Extended「Q-vism」
- エンディング・テーマ
- Cö shu Nie「bullet」
さて本記事では、チェックボックスのデザインをcssでトグルボタン式にカスマイズする方法を紹介します！
トグルボタン式チェックボックスの例としては、例えばnote（文章、イラスト等の作品配信サイト）のメール通知設定部分が挙げられます。
onとoffで円が行き来する
ご覧になったこと、一度はあるのではないでしょうか？
noteを既にご利用になっている方は、
- ヘッダーメニュー右にあるプロフィールアイコンをクリック
- 「アカウント設定」をクリック
- 遷移先のページで下の方にスクロールしていく
の手順で該当箇所を確認することができます！
筆者は先日、業務で初めてそのようにチェックボックスをカスタマイズすることがあったので作り方を調べたところ案外、簡単に実装できました(^o^)
本記事はその備忘録となります！
同じようにカスタマイズしたいと考えていらっしゃる方のお役に立てれば幸いです！
チェックボックスをトグルボタン式にカスタマイズ
チェックボックスの完成イメージ
先程も添付しましたnoteのチェックボックスが今回作成する完成イメージです！
スマホの場合、操作性抜群です！
チェックボックスのHTML構造
基本となるチェックボックスのHTML構造はこちら！
<div class="ItemBox">
<label class="ItemBox-Title">トグルボタン式チェックボックスカスマイズ</label>
<!-- 1アイテム -->
<div class="ItemBox-CheckBox">
<!-- 項目の名前 -->
<div class="ItemBox-CheckBox-Title">フォローされた時</div>
<!-- 任意のidを指定する -->
<input type="checkbox" id="FollowNoticeSetting" class="ItemBox-CheckBox-Input">
<!-- inputで指定したidをfor属性値に指定する -->
<label for="FollowNoticeSetting" class="ItemBox-CheckBox-Label"></label>
</div>
<!-- 1アイテム -->
<div class="ItemBox-CheckBox">
<div class="ItemBox-CheckBox-Title">いいねされた時</div>
<input type="checkbox" id="LikeNoticeSetting" class="ItemBox-CheckBox-Input">
<label for="LikeNoticeSetting" class="ItemBox-CheckBox-Label"></label>
</div>
</div>項目の名前はダミーで「フォローされた時」「いいねされた時」と入れています！お好みで変更してください。
.Item-Box-CheckBoxが一塊となってます(^o^)
ポイントはinputタグで指定したid属性値を、labelタグのfor属性値に指定することです！
チェックボックスのCSS
さてさて先程のHTMLをcssでカスタマイズしていきましょう！
こちらもコピペで動くので試してみてください(^o^)
/* ---------------------------- */
/* --- トグルボタン式のチェックボックス --- */
/* ---------------------------- */
.ItemBox{
margin-bottom: 20px; /* なくてもOK */
}
.ItemBox-Title{
margin-bottom: 10px;
display: block;
width: 100%;
color: #666; /* お好みで */
}
.ItemBox-CheckBox{
margin-top: 10px;
display: flex;
align-items: center;
}
.ItemBox-CheckBox-Title{
font-size: 14px;
}
.ItemBox-CheckBox-Input{
display: none; /* inputタグは非表示にする */
}
.ItemBox-CheckBox-Label{
position: relative;
margin-left: auto;
width: 56px;
height: 24px;
border-radius: 80px;
background: #d0d2d9; /* チェックされていない時の背景色 */
cursor: pointer;
transition: .2s ease; /* 円が動くスピードを指定 */
}
.ItemBox-CheckBox-Input:checked + .ItemBox-CheckBox-Label{
background: #41c9b4; /* チェックされた時の背景色 */
}
.ItemBox-CheckBox-Label:before{
content: '';
position: absolute;
top: 2px;
left: 2px;
border-radius: 80px;
width: 20px;
height: 20px;
background: #fff;
transition: .2s ease; /* 円が動くスピードを指定 */
}
.ItemBox-CheckBox-Input:checked + .ItemBox-CheckBox-Label:before{
left: 33px;
}
ポイントは、以下4つです！(^o^)
- inputタグは非表示にする
- labelタグで見た目を表現する
- :checked属性で「チェックされたかどうか」を判定する
- :checked属性がついたinputの隣接セレクタのlabelタグにスタイリングを指定することでon・offの見た目を表現する
まとめ
いかがでしたでしょうか。
「チェックボックスをイケてる風にしたい！！」
という方にはうってつけのカスタマイズだと思うのでそういう方はぜひお試しあれです。
最後までご高覧いただきありがとうございました！
