Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1180" tabindex="0" role="group" aria-label="達成率72パーセント。目標は80パーセント"><span class="tbx-1180__head"><b>Completion</b><strong>72%</strong></span><span class="tbx-1180__track"><i></i><em></em><small class="tbx-1180__hint">TARGET 80%</small></span><span class="tbx-1180__foot">Quarter 03 / 2026</span></div>
CSS
.tbx-1180{box-sizing:border-box;width:292px;max-width:100%;border:1px solid #d6e3e9;background:#fff;border-radius:10px;padding:22px 20px 18px;color:#29465a;font-family:system-ui,sans-serif;box-shadow:0 8px 24px #1d405310}.tbx-1180__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}.tbx-1180__head b{font-size:15px}.tbx-1180__head strong{font-size:26px;letter-spacing:-.05em}.tbx-1180__track{position:relative;display:block;height:12px;background:#dce8eb;border-radius:7px}.tbx-1180__track i{display:block;width:72%;height:100%;border-radius:7px;background:linear-gradient(90deg,#5298a9,#7cc7a5)}.tbx-1180__track em{position:absolute;top:-6px;left:80%;height:24px;border-left:2px dashed #ed9960;opacity:0;transform:scaleY(.5);transition:opacity .4s,transform .4s}.tbx-1180__hint{position:absolute;top:-36px;left:80%;transform:translate(-50%,10px);border-radius:3px;background:#29465a;color:white;padding:6px 8px;white-space:nowrap;font:700 9px system-ui;letter-spacing:.07em;opacity:0;transition:opacity .4s,transform .4s}.tbx-1180__foot{display:block;margin-top:15px;color:#79909b;font-size:11px}.tbx-1180:is(:hover,:focus-visible) .tbx-1180__track em,.tbx-1180:is(:hover,:focus-visible) .tbx-1180__hint{opacity:1}.tbx-1180:is(:hover,:focus-visible) .tbx-1180__track em{transform:scaleY(1)}.tbx-1180:is(:hover,:focus-visible) .tbx-1180__hint{transform:translate(-50%,0)}.tbx-1180:focus-visible{outline:3px solid #187a8b;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1180, .tbx-1180 *, .tbx-1180::before, .tbx-1180::after, .tbx-1180 *::before, .tbx-1180 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard / Statistics
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。