パーツ番号 10-02-11 ・ CSSのみ

予約内容確認サマリーカード

日時・人数・コースをアイコン付きで一覧表示し、合計金額を明示する確認画面カード。WordPressの予約フローの最終確認ステップに使えます。

bookingcss

プレビュー

ソースコード

HTML

<div class="d10-02-11-card">
          <p class="d10-02-11-h">ご予約内容の確認</p>
          <ul class="d10-02-11-list">
            <li><span class="d10-02-11-ic">📅</span><span>2026年7月18日(土)</span></li>
            <li><span class="d10-02-11-ic">⏰</span><span>14:00 〜 15:00</span></li>
            <li><span class="d10-02-11-ic">👥</span><span>2名様</span></li>
            <li><span class="d10-02-11-ic">📋</span><span>フェイシャルコース</span></li>
          </ul>
          <div class="d10-02-11-total"><span>合計</span><b>¥8,800</b></div>
        </div>

CSS

.d10-02-11-card{width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;box-shadow:0 8px 20px rgba(30,41,59,.08)}
        .d10-02-11-h{margin:0 0 12px;font-size:13px;font-weight:700;color:#0f172a}
        .d10-02-11-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
        .d10-02-11-list li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#334155}
        .d10-02-11-ic{font-size:14px}
        .d10-02-11-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px dashed #e2e8f0;font-size:13px;color:#475569}
        .d10-02-11-total b{color:#6366f1;font-size:18px}

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