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

質問番号インジケータ付きアンケートヘッダー

ドットで現在の質問位置を示すアンケートヘッダー見本。複数ページ形式のアンケートフォームの進行状況表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-15-06-head">
          <div class="d04-15-06-dots">
            <span class="d04-15-06-dot done"></span>
            <span class="d04-15-06-dot done"></span>
            <span class="d04-15-06-dot current"></span>
            <span class="d04-15-06-dot"></span>
            <span class="d04-15-06-dot"></span>
          </div>
          <span class="d04-15-06-count">質問 3 / 5</span>
        </div>

CSS

.d04-15-06-head{width:100%;max-width:230px;text-align:center}
        .d04-15-06-dots{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
        .d04-15-06-dot{width:11px;height:11px;border-radius:50%;background:#e2e8f0}
        .d04-15-06-dot.done{background:#a5b4fc}
        .d04-15-06-dot.current{background:#6366f1;width:14px;height:14px}
        .d04-15-06-count{font-size:12px;color:#6b7280;font-weight:600}

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