Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1192"><span class="tbx-1192__eyebrow">COMPARE PLANS</span><table aria-label="プラン比較例"><thead><tr><th scope="col">Feature</th><th scope="col"><a href="#basic">Basic</a></th><th scope="col"><a href="#plus">Plus</a></th></tr></thead><tbody><tr><th scope="row">Storage</th><td>10 GB</td><td>50 GB</td></tr><tr><th scope="row">Projects</th><td>3</td><td>Unlimited</td></tr><tr><th scope="row">Support</th><td>Email</td><td>Priority</td></tr></tbody></table></div>
CSS
.tbx-1192{box-sizing:border-box;width:290px;max-width:100%;padding:13px 12px 11px;background:#f6fbff;border:1px solid #d2e2f0;border-radius:10px;font-family:system-ui,sans-serif;color:#28415d}.tbx-1192__eyebrow{font-size:9px;font-weight:850;letter-spacing:.12em;color:#7196b6;display:block;margin-bottom:8px}.tbx-1192 table{width:100%;border-collapse:separate;border-spacing:0;text-align:center;table-layout:fixed;font-size:10px}.tbx-1192 th,.tbx-1192 td{box-sizing:border-box;padding:8px 5px;border-bottom:1px solid #dbe6ed;transition:background .3s,color .3s,box-shadow .3s}.tbx-1192 th:first-child{text-align:left;width:37%}.tbx-1192 thead th{font-weight:850;background:#e7f0f5}.tbx-1192 th a{color:#35617b;text-decoration:none;display:block;padding:2px}.tbx-1192 tbody th{font-weight:750;color:#617d92}.tbx-1192 tr:last-child th,.tbx-1192 tr:last-child td{border-bottom:0}.tbx-1192:has(thead th:nth-child(2):hover) :is(thead th:nth-child(2),tbody td:nth-child(2)),.tbx-1192:has(tbody td:nth-child(2):hover) :is(thead th:nth-child(2),tbody td:nth-child(2)),.tbx-1192:has(thead th:nth-child(2) a:focus-visible) :is(thead th:nth-child(2),tbody td:nth-child(2)){background:#d0e9f0;color:#0c5773;box-shadow:inset 2px 0 #54a1b8,inset -2px 0 #54a1b8}.tbx-1192:has(thead th:nth-child(3):hover) :is(thead th:nth-child(3),tbody td:nth-child(3)),.tbx-1192:has(tbody td:nth-child(3):hover) :is(thead th:nth-child(3),tbody td:nth-child(3)),.tbx-1192:has(thead th:nth-child(3) a:focus-visible) :is(thead th:nth-child(3),tbody td:nth-child(3)){background:#d5e6fb;color:#22517d;box-shadow:inset 2px 0 #7ba0d7,inset -2px 0 #7ba0d7}.tbx-1192 a:focus-visible{outline:2px solid #206d9a;outline-offset:2px}
@media (prefers-reduced-motion:reduce) {.tbx-1192,.tbx-1192 *,.tbx-1192::before,.tbx-1192::after,.tbx-1192 *::before,.tbx-1192 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Pricing / Comparison
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。