Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1296" role="group" aria-label="配送状況。ホバーすると発送までの3段階が強調される"><div class="tbx-1296__top"><span>ORDER #T-238</span><b>ON ITS WAY</b></div><strong>Parcel journey</strong><div class="tbx-1296__track"><span><i>✓</i><small>PACKED</small></span><span><i>➜</i><small>SHIPPED</small></span><span><i>⌂</i><small>ARRIVAL</small></span></div><p>Estimated delivery: Friday</p></div>CSS
*{box-sizing:border-box}
.tbx-1296{width:300px;max-width:100%;height:165px;padding:17px 18px;background:white;border:1px solid #d7dfe2;border-radius:12px;color:#26404e;box-shadow:0 9px 24px #173e5120;font-family:system-ui,sans-serif;cursor:default;overflow:hidden}.tbx-1296__top{display:flex;justify-content:space-between;gap:7px;align-items:center}.tbx-1296__top span{font-size:9px;letter-spacing:.1em;color:#8a96a0}.tbx-1296__top b{font-size:8px;color:#3a8e69;background:#e0f7e9;border-radius:20px;padding:4px 6px}.tbx-1296>strong{font-size:19px;display:block;margin-top:9px}.tbx-1296__track{position:relative;display:flex;justify-content:space-between;margin-top:15px}.tbx-1296__track::before{content:'';position:absolute;left:24px;right:24px;top:16px;height:2px;background:#d8e0e7}.tbx-1296__track>span{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:4px}.tbx-1296__track i{display:grid;place-items:center;font-size:15px;font-style:normal;width:32px;height:32px;border-radius:50%;border:1px solid #cfdae3;background:white;color:#8fa3ac;transition:background .25s,color .25s,border-color .25s;transition-delay:0}.tbx-1296__track span:nth-child(2) i{transition-delay:.12s}.tbx-1296__track span:nth-child(3) i{transition-delay:.24s}.tbx-1296__track small{font-size:8px;font-weight:750;letter-spacing:.07em;color:#7e909e}.tbx-1296 p{font-size:9px;color:#82919b;margin:7px 0 0}.tbx-1296:hover .tbx-1296__track i,.tbx-1296:focus-visible .tbx-1296__track i{background:#27745c;border-color:#27745c;color:#fff}.tbx-1296:focus-visible{outline:3px solid #7cbaa1;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1296 *,.tbx-1296::before,.tbx-1296::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
EC / Delivery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。