価格表示カード
価格表示カードは、料金プランの金額を大きく見せ、その上下に区分名や注意書きを添えたカード部品です。金額は sup で通貨記号、 b で数字、 sub で単位を組み合わせ、数字だけを特大の太字にして視線を集めています。白いカードに柔らかな影を落とし、中央寄せで整えた、料金ページにそのまま置ける落ち着いた見た目です。
解説
価格表示カードは、料金プランの金額を大きく見せ、その上下に区分名や注意書きを添えたカード部品です。金額は sup で通貨記号、b で数字、sub で単位を組み合わせ、数字だけを特大の太字にして視線を集めています。白いカードに柔らかな影を落とし、中央寄せで整えた、料金ページにそのまま置ける落ち着いた見た目です。CSS のみで構成され、JavaScript は不要です。
活用できる場面
- サブスクリプションや会員プランの料金提示
- サービス比較ページで複数プランを横並びにする場面
- キャンペーン価格を目立たせたいランディングページ
金額や単位は HTML の文字を書き換えるだけで変えられ、数字の大きさは .pt__m b の font-size で調整します。影や角丸を強めればカード感が増し、控えめにすれば誌面のような落ち着いた印象になります。「税込・いつでも解約可」のような補足は小さな文字で添えると安心感につながります。価格は誤解を生まないよう、税込か税抜かを必ず明記し、薄すぎる色で読みにくくならないようコントラストにも気を配りましょう。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
金額や単位の表示は自由に変えられますか
はい。通貨記号・数字・単位はそれぞれ sup・b・sub の中身を書き換えるだけで変わります。数字の大きさは .pt__m b の font-size で、目立たせたい度合いに合わせて調整できます。
料金表示で気をつけることはありますか
税込か税抜かを必ず明記し、誤解を招かないようにしましょう。解約条件などの補足は小さな文字で添えると安心感が増します。薄い色で読みにくくならないようコントラストにも注意します。