Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1228"><table aria-label="Monthly traffic example"><thead><tr><th scope="col">Channel</th><th scope="col">Visits</th><th scope="col">Change</th></tr></thead><tbody><tr><th scope="row">Organic</th><td>8,420</td><td><span class="tbx-1228-delta">+12.8% ↗</span></td></tr><tr><th scope="row">Direct</th><td>3,180</td><td><span class="tbx-1228-delta">+4.1% ↗</span></td></tr><tr><th scope="row">Referral</th><td>1,660</td><td><span class="tbx-1228-delta">−2.3% ↘</span></td></tr></tbody></table></div>CSS
.tbx-1228{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1228{display:grid;place-items:center;min-height:200px;width:100%;padding:18px 13px;background:#eaf0f4;font-family:Arial,sans-serif}.tbx-1228 *{box-sizing:border-box}.tbx-1228 table{border-collapse:collapse;width:min(100%,345px);background:white;color:#253b4a;box-shadow:0 7px 18px #1c405211;font-size:12px}.tbx-1228 th,.tbx-1228 td{text-align:left;padding:11px 7px;border-bottom:1px solid #e4ebef;white-space:nowrap}.tbx-1228 thead th{background:#d4e4ec;font-size:10px;letter-spacing:.07em}.tbx-1228 tbody th{font-weight:780}.tbx-1228 tbody tr{transition:background .26s}.tbx-1228 tbody tr:is(:hover,:focus-within){background:#dcefe8}.tbx-1228-delta{display:inline-block;color:#17775f;font-size:10px;font-weight:800;transform:translateX(-9px);opacity:.2;transition:transform .3s,opacity .3s}.tbx-1228 tbody tr:last-child .tbx-1228-delta{color:#a95b4c}.tbx-1228 tbody tr:hover .tbx-1228-delta{transform:none;opacity:1}.tbx-1228 tbody tr{cursor:default}
@media(prefers-reduced-motion:reduce){.tbx-1228 *, .tbx-1228 *::before,.tbx-1228 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard, Report
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。