パーツ番号 11-07-11 ・ CSSのみ

興味・関心タグ選択カード(固定・選択済み表示)

初回設定でユーザーが選んだ興味タグを固定表示するカードです。パーソナライズ設定のオンボーディング画面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-11-wrap">
          <p class="d11-07-11-h">興味のあるジャンルを選択</p>
          <div class="d11-07-11-tags">
            <span class="on">デザイン</span><span class="on">マーケティング</span><span>プログラミング</span><span>写真</span><span>ライティング</span>
          </div>
        </div>

CSS

.d11-07-11-wrap{ width:100%; max-width:240px; }
        .d11-07-11-h{ margin:0 0 10px; font-size:12px; font-weight:700; color:#334155; text-align:center; }
        .d11-07-11-tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
        .d11-07-11-tags span{ font-size:11px; color:#64748b; background:#f1f5f9; padding:7px 13px; border-radius:999px; border:1px solid #e2e8f0; }
        .d11-07-11-tags span.on{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; font-weight:700; }

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