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

ミニマル料金リスト(罫線区切り)

装飾を排し罫線のみで区切った縦並びの料金リスト。テキスト中心のミニマルなランディングページに馴染みます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-08-04-list">
          <div class="d05-08-04-row">
            <span class="d05-08-04-name">スターター</span>
            <span class="d05-08-04-price">¥0</span>
          </div>
          <div class="d05-08-04-row">
            <span class="d05-08-04-name">グロース</span>
            <span class="d05-08-04-price">¥1,980</span>
          </div>
          <div class="d05-08-04-row">
            <span class="d05-08-04-name">スケール</span>
            <span class="d05-08-04-price">¥5,980</span>
          </div>
          <div class="d05-08-04-row">
            <span class="d05-08-04-name">カスタム</span>
            <span class="d05-08-04-price">要相談</span>
          </div>
        </div>

CSS

.d05-08-04-list{width:100%;max-width:220px;border-top:1px solid #0f172a}
        .d05-08-04-row{display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px;border-bottom:1px solid #e2e8f0}
        .d05-08-04-name{font-size:11px;color:#334155;letter-spacing:.03em}
        .d05-08-04-price{font-size:13px;font-weight:800;color:#0f172a}

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