Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1120" role="group" aria-label="製品仕様"><div tabindex="0" class="tbx-1120__row"><span>重量</span><strong>920 <small>g</small></strong><em>軽量設計</em></div><div tabindex="0" class="tbx-1120__row"><span>厚み</span><strong>12 <small>mm</small></strong><em>スリム</em></div><div tabindex="0" class="tbx-1120__row"><span>保証</span><strong>3 <small>年</small></strong><em>安心サポート</em></div></div>
CSS
.tbx-1120{display:flex;flex-direction:column;width:min(286px,100%);background:#fff;border:1px solid #e0e8eb;border-radius:10px;overflow:hidden;font-family:system-ui,sans-serif}.tbx-1120__row{display:flex;align-items:center;gap:6px;position:relative;min-height:52px;padding:8px 13px;color:#395463;border-bottom:1px solid #e2ebee;transition:background .35s,padding .35s;cursor:default}.tbx-1120__row:last-child{border-bottom:0}.tbx-1120__row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#d78d75;transform:scaleY(0);transition:transform .35s}.tbx-1120__row>span{font-size:11px;font-weight:700;flex:1}.tbx-1120__row strong{font-size:16px;white-space:nowrap}.tbx-1120__row strong small{font-size:10px;color:#8a9da5}.tbx-1120__row em{flex:none;width:0;opacity:0;overflow:hidden;font-style:normal;white-space:nowrap;font-size:9px;color:#b3694d;font-weight:750;transition:width .4s,opacity .3s;margin-left:0}
.tbx-1120__row:is(:hover,:focus-visible){background:#f8efe9;padding-left:20px}.tbx-1120__row:is(:hover,:focus-visible):before{transform:scaleY(1)}.tbx-1120__row:is(:hover,:focus-visible) em{opacity:1;width:69px;margin-left:5px}.tbx-1120__row:focus-visible{outline:2px solid #d78d75;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.tbx-1120 *,.tbx-1120__row:before{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Specifications / EC
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。