Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1136" href="#reference-04"><span class="tbx-1136__number">[04]</span><span class="tbx-1136__title">調査資料を見る</span><span class="tbx-1136__note" aria-hidden="true"><b>REFERENCE</b><span>2026 / Design Notes</span></span></a>CSS
.tbx-1136{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:10px;width:min(318px,100%);min-height:76px;padding:15px 12px 16px;border-bottom:1px solid #b8c7d1;color:#173f59;text-decoration:none;font-family:system-ui,sans-serif}
.tbx-1136__number{font-size:12px;font-weight:800;color:#bd7454}.tbx-1136__title{font-size:15px;font-weight:800;white-space:nowrap}
.tbx-1136__note{position:absolute;right:9px;bottom:100%;display:flex;flex-direction:column;gap:4px;padding:9px 11px;background:#174660;color:#fff;border-radius:7px;box-shadow:0 8px 20px #173f5930;opacity:0;transform:translateY(11px) scale(.9);transform-origin:bottom right;pointer-events:none;transition:opacity .3s,transform .38s}
.tbx-1136__note:after{content:"";position:absolute;bottom:-6px;right:17px;border:6px solid transparent;border-bottom:0;border-top-color:#174660}.tbx-1136__note b{font-size:9px;letter-spacing:.15em;color:#b7d7df}.tbx-1136__note span{font-size:11px;white-space:nowrap}
.tbx-1136:is(:hover,:focus-visible) .tbx-1136__note{opacity:1;transform:translateY(0) scale(1)}
.tbx-1136:focus-visible{outline:3px solid #a96c4c;outline-offset:3px}
@media (prefers-reduced-motion: reduce) { .tbx-1136, .tbx-1136 *, .tbx-1136::before, .tbx-1136::after, .tbx-1136 *::before, .tbx-1136 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Documentation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。