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

担当スタッフ選択カード(固定・選択済み表示)

予約担当のスタッフをアバターカードで並べ、選択中の1名を色で示す表示。サロンや相談窓口の予約フォームに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="staffs">
          <div class="staff on"><span class="av">S</span><span class="nm">佐藤</span></div>
          <div class="staff"><span class="av">K</span><span class="nm">木村</span></div>
          <div class="staff"><span class="av">T</span><span class="nm">田中</span></div>
        </div>

CSS

.d10-09-11 .staffs{ display:flex; gap:8px; }
        .d10-09-11 .staff{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 12px; border-radius:8px; background:#f7f8fa; border:1px solid transparent; }
        .d10-09-11 .staff.on{ background:#e7edfd; border-color:#3f6fe0; }
        .d10-09-11 .av{ width:30px; height:30px; border-radius:50%; background:#c8ccd2; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-09-11 .staff.on .av{ background:#3f6fe0; }
        .d10-09-11 .nm{ font-size:10.5px; color:#5a606b; }
        .d10-09-11 .staff.on .nm{ color:#3f6fe0; font-weight:700; }

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