Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1129" aria-label="セクションの目次"><a href="#intro"><b>01</b><span>はじめに</span><i aria-hidden="true"></i><em>02</em></a><a href="#method"><b>02</b><span>制作の流れ</span><i aria-hidden="true"></i><em>08</em></a><a href="#works"><b>03</b><span>制作事例</span><i aria-hidden="true"></i><em>16</em></a></nav>CSS
.tbx-1129{width:min(286px,100%);background:#fbfaf5;border:1px solid #e5e0d4;border-radius:5px;padding:12px 15px;font-family:system-ui,sans-serif}.tbx-1129 a{display:flex;align-items:center;gap:9px;min-height:51px;border-bottom:1px solid #ece8df;text-decoration:none;color:#324b49;font-size:12px;transition:padding .35s,color .35s}.tbx-1129 a:last-child{border-bottom:0}.tbx-1129 a b{font-size:10px;font-weight:850;color:#bc896d}.tbx-1129 a span{white-space:nowrap;font-weight:700}.tbx-1129 a i{flex:1;min-width:10px;height:3px;opacity:.15;transform:scaleX(0);transform-origin:left;background:radial-gradient(circle,#b97f60 1.5px,transparent 1.7px) left center/9px 3px repeat-x;transition:transform .42s,opacity .42s}.tbx-1129 a em{font-size:10px;font-style:normal;color:#8da49c}.tbx-1129 a:is(:hover,:focus-visible){padding-left:9px;color:#b46c4b}.tbx-1129 a:is(:hover,:focus-visible) i{opacity:1;transform:scaleX(1)}.tbx-1129 a:focus-visible{outline:2px solid #b97f60;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.tbx-1129 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。