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

複数質問が縦に並ぶアンケートフォーム全体像

3つの質問ブロックを縦に並べ、それぞれ回答済みの状態を固定表示したフォーム全体見本。長文アンケートページの構成見本として使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-15-12-form">
          <div class="d04-15-12-block">
            <p class="d04-15-12-q">Q1. 年齢層を教えてください</p>
            <div class="d04-15-12-opts">
              <span class="d04-15-12-opt sel">30代</span>
              <span class="d04-15-12-opt">40代</span>
            </div>
          </div>
          <div class="d04-15-12-block">
            <p class="d04-15-12-q">Q2. 利用頻度は?</p>
            <div class="d04-15-12-opts">
              <span class="d04-15-12-opt">毎日</span>
              <span class="d04-15-12-opt sel">週1回</span>
            </div>
          </div>
          <div class="d04-15-12-block">
            <p class="d04-15-12-q">Q3. 総合満足度は?</p>
            <div class="d04-15-12-opts">
              <span class="d04-15-12-opt sel">満足</span>
              <span class="d04-15-12-opt">普通</span>
            </div>
          </div>
        </div>

CSS

.d04-15-12-form{width:100%;max-width:250px}
        .d04-15-12-block{margin-bottom:12px}
        .d04-15-12-q{font-size:11.5px;color:#334155;font-weight:600;margin-bottom:6px}
        .d04-15-12-opts{display:flex;gap:8px}
        .d04-15-12-opt{padding:5px 12px;font-size:11px;border-radius:99px;border:1.5px solid #e2e8f0;color:#94a3b8;background:#fff}
        .d04-15-12-opt.sel{border-color:#6366f1;background:#6366f1;color:#fff;font-weight:700}

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