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

アンケート完了画面のサマリーカード

回答完了後のお礼メッセージと達成率を示すサマリーカード見本。アンケートフォーム送信後のサンクスページに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-15-10-card">
          <span class="d04-15-10-check">&#10003;</span>
          <h4 class="d04-15-10-title">ご回答ありがとうございました</h4>
          <p class="d04-15-10-sub">全5問中 5問に回答しました</p>
          <div class="d04-15-10-bar"><div class="d04-15-10-fill"></div></div>
        </div>

CSS

.d04-15-10-card{width:100%;max-width:230px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px 16px}
        .d04-15-10-check{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#059669;color:#fff;font-size:20px;margin-bottom:10px}
        .d04-15-10-title{font-size:13.5px;color:#1a1d24;font-weight:700}
        .d04-15-10-sub{font-size:11.5px;color:#6b7280;margin-top:6px;margin-bottom:12px}
        .d04-15-10-bar{width:100%;height:6px;border-radius:99px;background:#eef0f3;overflow:hidden}
        .d04-15-10-fill{width:100%;height:100%;background:#059669}

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