Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1212"><a href="#tbx-1212-report" class="tbx-1212-card"><span class="tbx-1212-kicker">WEEKLY GROWTH <small>↗</small></span><span class="tbx-1212-number">+18.4<em>%</em></span><span class="tbx-1212-grid" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="tbx-1212-note">Peak conversion / THU</span></a></div>CSS
.tbx-1212{box-sizing:border-box}
.tbx-1212{display:grid;place-items:center;width:100%;min-height:182px;padding:10px;background:#e9f6ef;font-family:Arial,sans-serif}.tbx-1212 *{box-sizing:border-box}.tbx-1212-card{display:grid;grid-template-columns:1fr 104px;grid-template-rows:29px 1fr 24px;position:relative;width:min(100%,305px);height:162px;padding:15px;border-radius:10px;color:#1c443b;background:white;box-shadow:0 6px 17px #1d493015;text-decoration:none;outline-offset:4px}.tbx-1212-kicker{grid-column:1/3;display:flex;justify-content:space-between;letter-spacing:.14em;font-weight:800;font-size:10px}.tbx-1212-kicker small{font-size:17px}.tbx-1212-number{font-size:36px;font-weight:900;align-self:center;letter-spacing:-.06em}.tbx-1212-number em{font-size:18px;font-style:normal}.tbx-1212-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;align-self:center}.tbx-1212-grid i{height:16px;border-radius:2px;background:#e1eae1;transition:background .3s,transform .25s}.tbx-1212-grid i:nth-child(5n+1){background:#c8dfcf}.tbx-1212-note{grid-column:1/3;font-size:10px;color:#448269;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}.tbx-1212-card:is(:hover,:focus-visible) .tbx-1212-grid i:nth-child(3n+1){background:#197a5b;transform:translateY(-3px)}.tbx-1212-card:is(:hover,:focus-visible) .tbx-1212-grid i:nth-child(3n+2){background:#9dcc7a}.tbx-1212-card:is(:hover,:focus-visible) .tbx-1212-grid i:nth-child(4n){background:#e0ba61}.tbx-1212-card:is(:hover,:focus-visible) .tbx-1212-note{opacity:1;transform:translateY(0)}.tbx-1212-card:focus-visible{outline:3px solid #197a5b}
@media (prefers-reduced-motion:reduce){.tbx-1212 *, .tbx-1212 *::before, .tbx-1212 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard / Report
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。