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

絵文字アイコン付きタグ選択UI

タグの先頭に絵文字を添えて内容を直感的に伝えるデザインです。天気情報サイトやイベント紹介ページのカテゴリタグに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-16-10-field">
          <span class="d11-16-10-chip">&#9728;&#65039; 晴れ</span>
          <span class="d11-16-10-chip">&#127783;&#65039; 雨</span>
          <span class="d11-16-10-chip">&#10052;&#65039; 雪</span>
          <span class="d11-16-10-chip">&#127800; 春</span>
        </div>

CSS

.d11-16-10-field{width:100%;max-width:280px;display:flex;flex-wrap:wrap;gap:8px;font-family:sans-serif}
        .d11-16-10-chip{padding:7px 14px;background:#f0f9ff;color:#075985;font-size:12.5px;font-weight:600;border-radius:10px;border:1px solid #bae6fd}

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