料金プランの比較カード
LPの節 ／ パターン集トップ
料金プランの比較。推しは1枚だけ枠とバッジで立てる
プレビュー#
調整する#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<section class="pricing page" id="plan" aria-labelledby="pricing-title">
<h2 id="pricing-title">豆の定期便</h2>
<ul class="pricing__list">
<li class="pricing__card">
<h3>お試し</h3>
<p class="pricing__price"><strong>1,980</strong>円／月</p>
<ul class="pricing__features">
<li>月に200gを1袋</li>
<li>産地はこちらで選ぶ</li>
<li>淹れ方のメモつき</li>
</ul>
<a class="button button--secondary" href="#contact">申し込む</a>
</li>
<li class="pricing__card pricing__card--featured">
<p class="pricing__badge">おすすめ</p>
<h3>標準</h3>
<p class="pricing__price"><strong>3,300</strong>円／月</p>
<ul class="pricing__features">
<li>月に200gを2袋</li>
<li>産地を毎月選べる</li>
<li>淹れ方のメモつき</li>
<li>挽き目を指定できる</li>
</ul>
<a class="button button--secondary" href="#contact">申し込む</a>
</li>
<li class="pricing__card">
<h3>たっぷり</h3>
<p class="pricing__price"><strong>5,500</strong>円／月</p>
<ul class="pricing__features">
<li>月に400gを2袋</li>
<li>産地を毎月選べる</li>
<li>淹れ方のメモつき</li>
<li>焙煎の日にご招待</li>
</ul>
<a class="button button--secondary" href="#contact">申し込む</a>
</li>
</ul>
</section>.pricing__list {
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--price-min, 15rem)), 1fr));
align-items: start;
}
.pricing__card {
display: grid;
gap: var(--space-3);
padding: var(--space-5);
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.pricing__card--featured {
border: 2px solid var(--color-accent-text);
position: relative;
}
.pricing__badge {
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--space-4);
translate: 0 -50%;
margin: 0;
padding: 2px var(--space-3);
background: var(--color-accent-text);
color: var(--color-on-accent);
font-size: var(--text-sm);
}
.pricing__card h3 {
margin: 0;
font-size: var(--text-base);
}
.pricing__price {
margin: 0;
}
.pricing__price strong {
font-size: var(--text-xl);
font-variant-numeric: tabular-nums;
}
.pricing__features {
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.pricing__features li {
padding-block: var(--space-2);
border-block-start: 1px solid var(--color-border);
}
/* .button の基底と派生は「出発点のCSS」にある */確認する#
- おすすめは1枚だけにしている
- 推しは枠とバッジで立て、ボタンの色では立てない（塗りのボタンは締めのCTAに取っておく）
- 機能は各プランで同じ順に並べ、差分が縦に比べられる
- 375pxの縦積みでも、おすすめが埋もれない位置にある