月額/年額トグル料金表
スイッチひとつで月額表示と年額表示を切り替えられる 2 プランの料金表です。トグルはチェックボックスを隠し、 +span に対する :checked 擬似クラスで丸いつまみを動かす、画像不要の CSS スイッチで作られています。
このパーツの使いどころと実装ポイント
スイッチひとつで月額表示と年額表示を切り替えられる 2 プランの料金表です。トグルはチェックボックスを隠し、+span に対する :checked 擬似クラスで丸いつまみを動かす、画像不要の CSS スイッチで作られています。各カードには月額（.m）と年額（.y）の両方を持たせ、スイッチ状態に応じて表示を切り替える前提の構造です。
向いている場面
- SaaS やサブスクリプションの料金ページ
- 会員プラン・コースを比較させたい教室や講座
- 月払い・年払いで割引を訴求したいサービス
年額に「2ヶ月分お得」と添えることで、長期契約のメリットを自然に伝えられます。プランを増やす場合は pt2__g のグリッド列数を調整してください。
実装上の注意
表示の切り替えには JavaScript でクラスを付け外しするか、:checked と兄弟セレクタで CSS だけ完結させる方法があります。チェックボックスを隠したままだとキーボード操作や読み上げで状態が伝わらないため、label と関連付けて aria-label を補い、フォーカスリングを残すとアクセシブルになります。金額は税込・税抜の別を明記しておくと誤解を防げます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
JavaScriptなしで月額・年額を切り替えられますか。
可能です。チェックボックスの:checked状態と兄弟セレクタを使えば、CSSだけで月額表示と年額表示を入れ替えられます。ただし制御が複雑になりやすいので、プランが多い場合はJSでクラスを切り替える方が管理しやすいです。
プランを3つ以上に増やせますか。
増やせます。pt2__gのグリッド列数をプラン数に合わせて変更してください。3列以上になると横幅が窮屈になるため、狭い画面ではカードを縦に積む指定を併せて入れると見やすくなります。