Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1216"><table aria-label="Sample project data"><thead><tr><th scope="col">Project</th><th scope="col"><button type="button" aria-label="Sort by visits (demo only)">Visits <span aria-hidden="true">↕</span></button></th><th scope="col"><button type="button" aria-label="Sort by leads (demo only)">Leads <span aria-hidden="true">↕</span></button></th></tr></thead><tbody><tr><td>Atlas</td><td>4,210</td><td>48</td></tr><tr><td>North</td><td>3,850</td><td>62</td></tr><tr><td>Terra</td><td>2,960</td><td>37</td></tr></tbody></table></div>CSS
.tbx-1216{box-sizing:border-box}
.tbx-1216{display:grid;place-items:center;width:100%;min-height:182px;padding:13px;background:#eef3f6;font-family:Arial,sans-serif}.tbx-1216 *{box-sizing:border-box}.tbx-1216 table{border-collapse:collapse;max-width:100%;width:min(100%,340px);background:white;box-shadow:0 6px 18px #21394e0e;color:#233c50;font-size:12px}.tbx-1216 th,.tbx-1216 td{padding:11px 10px;text-align:left;border-bottom:1px solid #e4eaf0;transition:background .25s}.tbx-1216 th{background:#dbe8f1;font-size:11px}.tbx-1216 td{font-variant-numeric:tabular-nums}.tbx-1216 th button{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}.tbx-1216 th button span{display:inline-block;margin-left:3px;opacity:.3;transform:translateY(1px);transition:opacity .3s,transform .3s}.tbx-1216 th:is(:hover,:focus-within){background:#f8e5a9}.tbx-1216 tbody tr:hover td{background:#f1f7f9}.tbx-1216 th:is(:hover,:focus-within) button span{opacity:1;transform:translateY(-3px)}.tbx-1216 th button:focus-visible{outline:2px solid #2d6991;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1216 *, .tbx-1216 *::before, .tbx-1216 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard / Comparison
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。