パーツ番号 06-03-06 ・ CSSのみ

資格・受賞バッジ列

メダルやバッジのSVGが並び、ホバーで拡大してラベルが表示されます。実績や保有資格をアピールするプロフィール欄に。

hovercsssvg

プレビュー

ソースコード

HTML

<div class="d06-03-06-row">
          <div class="d06-03-06-badge"><svg viewBox="0 0 24 24" width="26" height="26"><path fill="currentColor" d="M12 2 9 7l-5.5.8 4 3.9L6.6 17 12 14.3 17.4 17l-1-5.3 4-3.9L15 7 12 2Z"/></svg><span class="d06-03-06-lbl">最優秀賞</span></div>
          <div class="d06-03-06-badge"><svg viewBox="0 0 24 24" width="26" height="26"><path fill="currentColor" d="M12 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-3 1.5L7 22l5-2 5 2-2-5.5A7 7 0 0 1 9 16.5Z"/></svg><span class="d06-03-06-lbl">認定資格</span></div>
          <div class="d06-03-06-badge"><svg viewBox="0 0 24 24" width="26" height="26"><path fill="currentColor" d="M17 3H7v2H4v3a4 4 0 0 0 3 3.9A5 5 0 0 0 11 15v2H8v2h8v-2h-3v-2a5 5 0 0 0 4-3.1A4 4 0 0 0 20 8V5h-3V3ZM6 8V6h1v3.8A2 2 0 0 1 6 8Zm12 0a2 2 0 0 1-1 1.8V6h1v2Z"/></svg><span class="d06-03-06-lbl">グランプリ</span></div>
          <div class="d06-03-06-badge"><svg viewBox="0 0 24 24" width="26" height="26"><path fill="currentColor" d="M4 4h16v11H4V4Zm2 2v7h12V6H6Zm2 13h8v2H8v-2Z"/></svg><span class="d06-03-06-lbl">技術認証</span></div>
        </div>

CSS

.d06-03-06-row{display:flex;gap:14px}
        .d06-03-06-badge{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#ffb347,#ff7e5f);box-shadow:0 6px 14px rgba(255,126,95,.35);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
        .d06-03-06-badge:nth-child(2){background:linear-gradient(135deg,#6a8dff,#9b6bff)}
        .d06-03-06-badge:nth-child(3){background:linear-gradient(135deg,#3ec6b0,#5ac8fa)}
        .d06-03-06-badge:nth-child(4){background:linear-gradient(135deg,#ff8fb1,#a86bff)}
        .d06-03-06-badge:hover{transform:scale(1.18) translateY(-4px)}
        .d06-03-06-lbl{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;font-size:11px;font-weight:600;color:#3a4666;background:#fff;padding:2px 8px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
        .d06-03-06-badge:hover .d06-03-06-lbl{opacity:1;transform:translateX(-50%) translateY(0)}

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