Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1118" aria-label="カテゴリー一覧"><a href="#architecture"><span class="tbx-1118__icon" aria-hidden="true"><i></i><i></i></span><span>ARCHITECTURE</span><b>12</b></a><a href="#culture"><span class="tbx-1118__icon" aria-hidden="true"><i></i><i></i></span><span>CULTURE</span><b>08</b></a><a href="#objects"><span class="tbx-1118__icon" aria-hidden="true"><i></i><i></i></span><span>OBJECTS</span><b>19</b></a></nav>
CSS
.tbx-1118{width:min(284px,100%);background:#f8f0e9;border:1px solid #e9d5c4;padding:10px;border-radius:8px;font-family:system-ui,sans-serif}.tbx-1118 a{display:flex;align-items:center;gap:10px;padding:10px 8px;color:#54463c;text-decoration:none;font-size:10px;letter-spacing:.07em;font-weight:850;border-bottom:1px solid #e5d7c8;transition:background .3s}.tbx-1118 a:last-child{border-bottom:0}.tbx-1118__icon{position:relative;flex:none;width:31px;height:31px;border-radius:50%;background:#e5cabc;display:block}.tbx-1118__icon i{position:absolute;left:7px;top:14px;width:17px;height:2px;background:#97654f;transform:rotate(30deg);transition:transform .4s}.tbx-1118__icon i+ i{transform:rotate(-30deg)}.tbx-1118 b{margin-left:auto;color:#b48d77;font-size:10px}
.tbx-1118 a:is(:hover,:focus-visible){background:#f0e0d4}.tbx-1118 a:is(:hover,:focus-visible) i:first-child{transform:rotate(135deg)}.tbx-1118 a:is(:hover,:focus-visible) i:last-child{transform:rotate(-135deg)}.tbx-1118 a:focus-visible{outline:2px solid #97654f;outline-offset:-2px}@media(prefers-reduced-motion:reduce){.tbx-1118 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Categories / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。