Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1130" aria-label="会社案内"><a href="#company"><span class="tbx-1130__rail" aria-hidden="true"></span><b>01</b><strong>COMPANY</strong><small>会社案内</small></a><a href="#service"><span class="tbx-1130__rail" aria-hidden="true"></span><b>02</b><strong>SERVICE</strong><small>事業内容</small></a><a href="#recruit"><span class="tbx-1130__rail" aria-hidden="true"></span><b>03</b><strong>RECRUIT</strong><small>採用情報</small></a></nav>CSS
.tbx-1130{width:min(284px,100%);padding:10px 12px 10px 24px;background:#e9f0eb;border:1px solid #d7e0d8;border-radius:10px;font-family:system-ui,sans-serif}.tbx-1130 a{position:relative;display:flex;align-items:center;gap:9px;height:60px;color:#3d5c58;text-decoration:none;border-bottom:1px solid #d1dfd5;transition:color .32s,background .32s}.tbx-1130 a:last-child{border:0}.tbx-1130__rail{position:absolute;left:-11px;top:0;bottom:0;width:1px;background:#98b5a9}.tbx-1130__rail:after{content:"";position:absolute;top:49%;left:-4px;width:10px;height:10px;border-radius:50%;background:#bb8368;transform:translateY(-50%) scale(0);transition:transform .32s}.tbx-1130 a:before{content:"";position:absolute;left:-9px;top:50%;width:0;height:2px;background:#bb8368;transition:width .36s;transform:translateY(-50%)}.tbx-1130 b{font-size:9px;color:#b6846d}.tbx-1130 strong{font-size:12px;letter-spacing:.08em;flex:1}.tbx-1130 small{font-size:9px;color:#76968c}.tbx-1130 a:is(:hover,:focus-visible){color:#b36c50;background:#f1f6f0}.tbx-1130 a:is(:hover,:focus-visible):before{width:12px}.tbx-1130 a:is(:hover,:focus-visible) .tbx-1130__rail:after{transform:translateY(-50%) scale(1)}.tbx-1130 a:focus-visible{outline:2px solid #bb8368;outline-offset:-2px}@media(prefers-reduced-motion:reduce){.tbx-1130 *,.tbx-1130 a:before,.tbx-1130__rail:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。