3プラン横並び料金表
Starter / Pro / Business を横並びで見せる、SaaS 定番の 3 プラン料金表です。 display:grid;grid-template-columns:repeat(3,1fr) で 3 等分し、おすすめの Pro 列だけ .pt-col--rec で transform:scale(1…
解説
Starter / Pro / Business を横並びで見せる、SaaS 定番の 3 プラン料金表です。display:grid;grid-template-columns:repeat(3,1fr) で 3 等分し、おすすめの Pro 列だけ .pt-col--rec で transform:scale(1.04) と濃い影を当てて一段持ち上げ、視線を集めます。「人気」バッジは .pt-badge を position:absolute で列の上端中央に出しています。各列はホバーで translateY(-4px) 浮き上がり、選択感を補強。CSS のみで動きます。
使う場面
- サブスク型サービスの料金ページ
- 無料・有料の段階を比較させたいツール紹介
- 会員ランクやコース料金の提示
プラン名・価格・機能リスト（.pt-feats の li）はテキストを書き換えるだけで差し替え可能です。推し列を変えるなら pt-col--rec を別の列へ移すだけ。アクセント色は #667eea を共通で使っているので一括変更できます。3 列はスマホで窮屈になりやすいため、狭い画面では grid-template-columns を 1 列に切り替える指定を足すと読みやすくなります。
よくある質問
プラン数を 4 つに増やせますか?
増やせます。pt-col を 1 つ追加し、grid-template-columns を repeat(4,1fr) に変えれば 4 列になります。狭い画面では列が窮屈になるので折り返しの指定も合わせて検討してください。
おすすめプランの強調を別の列に移せますか?
移せます。pt-col--rec クラスと pt-badge を強調したい列へ付け替えるだけで、拡大表示とバッジがその列に移動します。