Live Demo
マウスを乗せるか、Tabキーで操作して変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1063" tabindex="0" role="group" aria-label="プロジェクトメンバー3名">
<div class="tbx-1063__top"><strong>Project Team</strong><span>3 members</span></div>
<div class="tbx-1063__stack"><span class="tbx-1063__person"><i>AK</i><small>Akari</small></span><span class="tbx-1063__person"><i>RM</i><small>Rumi</small></span><span class="tbx-1063__person"><i>SO</i><small>Sora</small></span></div>
<p>メンバーの写真に差し替えて利用できます。</p>
</div>
CSS
.tbx-1063{font:12px/1.4 system-ui,sans-serif;width:min(300px,100%);padding:18px 18px 13px;background:#fff;border:1px solid #d9e0e8;border-radius:11px;color:#2d4b5e;transition:border-color .26s,box-shadow .26s}
.tbx-1063__top{display:flex;justify-content:space-between;align-items:center;gap:10px}.tbx-1063__top strong{font-size:12px}.tbx-1063__top span{font-size:9px;color:#8799a7}.tbx-1063__stack{display:flex;align-items:center;height:95px;padding:8px 2px;gap:0;transition:gap .3s}.tbx-1063__person{display:grid;justify-items:center;gap:5px;margin-left:-13px;transition:margin .3s,transform .3s;position:relative}.tbx-1063__person:first-child{margin-left:0}.tbx-1063__person i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#fff;font-size:13px;font-weight:800;border:3px solid white;background:linear-gradient(135deg,#6ca29d,#316875)}.tbx-1063__person:nth-child(2) i{background:linear-gradient(135deg,#d3a980,#ac6c60)}.tbx-1063__person:nth-child(3) i{background:linear-gradient(135deg,#8c9bd1,#556897)}.tbx-1063__person small{font-size:9px;opacity:0;transform:translateY(-5px);transition:opacity .3s,transform .3s;color:#526f7f}
.tbx-1063:is(:hover,:focus-visible){border-color:#9fc6c8;box-shadow:0 9px 22px #28495c16}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__stack{gap:16px}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__person{margin-left:0}.tbx-1063:is(:hover,:focus-visible) .tbx-1063__person small{opacity:1;transform:translateY(0)}.tbx-1063 p{font-size:9px;color:#81929d;margin:0}.tbx-1063:focus-visible{outline:3px solid #d0a574;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tbx-1063,.tbx-1063__stack,.tbx-1063__person,.tbx-1063__person small{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Team / Community
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。