月額／年額切り替え料金表
このパーツは、トグルスイッチで月額と年額を切り替えられる3プランの料金表です。スイッチは input type="checkbox" を隠し、CSSの :checked 状態でつまみを横にスライドさせる定番の作りです。
このパーツの使いどころと実装ポイント
このパーツは、トグルスイッチで月額と年額を切り替えられる3プランの料金表です。スイッチはinput type="checkbox"を隠し、CSSの:checked状態でつまみを横にスライドさせる定番の作りです。各プランの金額はdata-mo（月額）とdata-yr（年額）の両方を属性に持ち、JSがトグルに応じて表示価格を差し替えます。真ん中のプランには「人気No.1」バッジが付き、選んでほしい選択肢を視覚的に強調できます。
向いている場面
- 月払い・年払いを用意したサブスク型サービスの料金ページ
- 松竹梅の3段階で見せたい制作・保守プラン
- 年契約の割引を訴求したいSaaS
カスタマイズの勘所
金額を変えるときは表示テキストではなくdata-moとdata-yrの値を更新します。年額の割引率（20%OFFのバッジ）も実際の計算と食い違わないよう合わせてください。プラン数を変える場合はprice__cardを足し引きし、おすすめにしたいカードへ--featured修飾を付け替えます。各プランの機能リストは数をそろえると比較しやすくなります。
実装上の注意
スイッチは見た目を作り込むためにネイティブのチェックボックスを透明化していますが、キーボード操作で切り替えられる状態を保つことが大切です。月額・年額のどちらが選ばれているかは、ラベルの強調でも分かるようにしておくと誤解を防げます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
金額を変更したのに表示が変わりません。どこを直しますか?
見えている価格テキストではなく、各数字要素のdata-mo（月額）とdata-yr（年額）の値を書き換えてください。JSはトグルの状態に応じてこの属性値を読み込んで表示を差し替えるため、属性側を直さないと切り替え後の金額に反映されません。
プランを4つに増やすことはできますか?
できます。price__cardのブロックを1つ複製して内容を整えれば4プランになります。ただし横並びが窮屈になりやすいので、スマホでは縦積みになる挙動を確認し、PCでもカード幅が狭くなりすぎないかチェックしてください。