Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1052" aria-label="サービスご利用の流れ">
<a href="#tbx-1052-end" aria-label="1 ご相談"><span>01</span><b>ご相談</b></a>
<a href="#tbx-1052-end" aria-label="2 お見積り"><span>02</span><b>お見積り</b></a>
<a href="#tbx-1052-end" aria-label="3 開始"><span>03</span><b>開始</b></a>
<span id="tbx-1052-end" class="tbx-1052__sr">3つのステップをご案内しました。</span>
</nav>
CSS
.tbx-1052{display:flex;align-items:flex-start;justify-content:center;width:min(307px,100%);padding:12px 0 6px;font-family:system-ui;position:relative}.tbx-1052>a{flex:1;position:relative;text-decoration:none;color:#607789;display:grid;justify-items:center;gap:9px;font-size:10px;white-space:nowrap;transition:color .3s}
.tbx-1052>a:not(:nth-child(3)):after{content:"";height:2px;position:absolute;top:21px;left:calc(50% + 23px);width:calc(100% - 46px);background:#d5e1e6;transition:background .3s}
.tbx-1052>a>span{width:45px;height:45px;display:grid;place-items:center;border:2px solid #d4e3e7;border-radius:50%;background:#f4f8f9;font-size:13px;font-weight:800;color:#496b7b;transition:border-color .3s,transform .3s,background .3s,color .3s;position:relative;z-index:1}
.tbx-1052>a b{font-size:10px;font-weight:700}.tbx-1052>a:is(:hover,:focus-visible){color:#165e6c}.tbx-1052>a:is(:hover,:focus-visible)>span{border-color:#37858b;background:#347c83;color:#fff;transform:scale(1.11)}.tbx-1052>a:is(:hover,:focus-visible):after{background:#37858b}
.tbx-1052>a:focus-visible{outline:3px solid #d3a16e;outline-offset:3px;border-radius:7px}.tbx-1052__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){.tbx-1052>a,.tbx-1052>a:after,.tbx-1052>a>span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Guide
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。