パーツ番号 05-08-11 ・ CSSのみ

月額/年額切替タブ付き料金カード(静止)

月額・年額の切替タブを備え年額側を選択済み表示した料金カード。年間契約への誘導を狙う料金ページの見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-08-11-card">
          <div class="d05-08-11-switch">
            <span class="d05-08-11-opt">月額</span>
            <span class="d05-08-11-opt d05-08-11-active">年額<em>2ヶ月分お得</em></span>
          </div>
          <p class="d05-08-11-price">¥19,800<span>/年</span></p>
          <ul class="d05-08-11-list"><li>全機能利用可</li><li>50GB容量</li><li>優先サポート</li></ul>
        </div>

CSS

.d05-08-11-card{width:100%;max-width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center}
        .d05-08-11-switch{display:flex;background:#f1f5f9;border-radius:8px;padding:3px;margin-bottom:14px}
        .d05-08-11-opt{flex:1;font-size:9.5px;color:#94a3b8;padding:6px 4px;border-radius:6px}
        .d05-08-11-active{background:#0f172a;color:#fff;font-weight:700}
        .d05-08-11-active em{display:block;font-style:normal;font-size:8px;color:#fbbf24;margin-top:2px}
        .d05-08-11-price{font-size:19px;font-weight:800;color:#0f172a;margin:0 0 8px}
        .d05-08-11-price span{font-size:9px;font-weight:400;color:#94a3b8}
        .d05-08-11-list{list-style:none;margin:0;padding:10px 0 0;border-top:1px dashed #e2e8f0;font-size:9px;color:#475569;line-height:1.9;text-align:left}

クラス名 .d05-08-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。