Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1156" role="group" aria-label="プランの仕様比較"><div class="tbx-1156__head"><span>FEATURE</span><span>STANDARD</span><span>PRO</span></div><button type="button" class="tbx-1156__row"><span>Storage</span><span>50 GB</span><strong>200 GB</strong></button><button type="button" class="tbx-1156__row"><span>Support</span><span>Email</span><strong>Priority</strong></button><button type="button" class="tbx-1156__row"><span>Projects</span><span>5</span><strong>Unlimited</strong></button></div>CSS
.tbx-1156{box-sizing:border-box;width:min(330px,100%);padding:12px;background:#f2f4f0;border:1px solid #d4dcd0;border-radius:8px;font-family:system-ui,sans-serif;color:#34453d}
.tbx-1156__head,.tbx-1156__row{box-sizing:border-box;display:grid;grid-template-columns:1.2fr .9fr .9fr;align-items:center;gap:5px;text-align:left;width:100%}
.tbx-1156__head{padding:5px 10px 9px;font-size:9px;letter-spacing:.03em;font-weight:800;color:#76847b}.tbx-1156__head span:not(:first-child){text-align:center}
.tbx-1156__row{cursor:pointer;position:relative;min-height:38px;padding:9px 10px;margin:4px 0;border:1px solid #d9e3da;border-radius:5px;background:#fff;color:#384c42;font:600 11px system-ui,sans-serif;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.tbx-1156__row span:not(:first-child),.tbx-1156__row strong{text-align:center}.tbx-1156__row strong{font-size:11px;color:#347b59;transition:color .25s}
.tbx-1156__row:is(:hover,:focus-visible){z-index:1;transform:translateY(-3px);box-shadow:0 6px 12px #3c614627;background:#e9f6ed;border-color:#7eaa8b}.tbx-1156__row:is(:hover,:focus-visible) strong{color:#176942}
.tbx-1156__row:focus-visible{outline:2px solid #347b59;outline-offset:2px}
@media (prefers-reduced-motion: reduce) { .tbx-1156, .tbx-1156 *, .tbx-1156::before, .tbx-1156::after, .tbx-1156 *::before, .tbx-1156 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Pricing / Comparison
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。