← 静的パーツギャラリーへ戻る

パーツ番号 04-10-07 ・ CSSのみ

確認画面のサマリーカードレイアウト

入力内容を項目ごとに一覧表示する確認画面のカード見本です。注文フォームや予約フォームの最終確認ステップに使用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-07-card">
          <div class="d04-10-07-head"><span class="d04-10-07-tag">STEP 3</span><h4>ご注文内容の確認</h4></div>
          <dl class="d04-10-07-rows">
            <div class="d04-10-07-row"><dt>お名前</dt><dd>山田 太郎</dd></div>
            <div class="d04-10-07-row"><dt>お届け先</dt><dd>東京都渋谷区&#12316;1-2-3</dd></div>
            <div class="d04-10-07-row"><dt>お支払い</dt><dd>クレジットカード</dd></div>
          </dl>
        </div>

CSS

.d04-10-07-card{width:100%;max-width:290px;border-radius:12px;border:1px solid #eef0f3;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;font-family:sans-serif}
        .d04-10-07-head{padding:14px 16px 10px;border-bottom:1px solid #eef0f3}
        .d04-10-07-tag{display:inline-block;font-size:10px;font-weight:800;color:#6366f1;background:#eef2ff;padding:2px 8px;border-radius:99px;margin-bottom:6px}
        .d04-10-07-head h4{margin:0;font-size:14px;font-weight:700;color:#1f2937}
        .d04-10-07-rows{margin:0;padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px}
        .d04-10-07-row{display:flex;justify-content:space-between;gap:10px;font-size:12px}
        .d04-10-07-row dt{color:#9ca3af}
        .d04-10-07-row dd{margin:0;color:#1f2937;font-weight:600;text-align:right}

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