Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1190" aria-label="章一覧"><a href="#chapter1"><span class="tbx-1190__idx">CH 01</span><span class="tbx-1190__name">Origins</span><span aria-hidden="true">↗</span></a><a href="#chapter2"><span class="tbx-1190__idx">CH 02</span><span class="tbx-1190__name">Process</span><span aria-hidden="true">↗</span></a><a href="#chapter3"><span class="tbx-1190__idx">CH 03</span><span class="tbx-1190__name">Results</span><span aria-hidden="true">↗</span></a></nav>
CSS
.tbx-1190{box-sizing:border-box;display:grid;width:271px;max-width:100%;padding:10px 15px;border-top:4px solid #222f44;background:#faf5ee;border-radius:4px;font-family:system-ui,sans-serif}.tbx-1190 a{position:relative;display:grid;grid-template-columns:55px 1fr 20px;gap:6px;align-items:center;min-height:43px;color:#263548;text-decoration:none;border-bottom:1px solid #d5cdc1;padding:6px 4px;transition:background .3s}.tbx-1190 a:last-child{border-bottom:0}.tbx-1190 a::before{content:"";height:100%;width:3px;position:absolute;top:0;left:-15px;background:#d97850;transform:scaleY(0);transform-origin:bottom;transition:transform .36s}.tbx-1190__idx{font-size:9px;letter-spacing:.08em;font-weight:850;color:#9b8876;transition:transform .3s}.tbx-1190__name{font:700 16px Georgia,serif;transition:transform .3s}.tbx-1190 a>span:last-child{font-size:17px;transform:translate(-5px,4px);opacity:0;transition:transform .3s,opacity .3s}.tbx-1190 a:is(:hover,:focus-visible){background:#f3e9d9}.tbx-1190 a:is(:hover,:focus-visible)::before{transform:scaleY(1)}.tbx-1190 a:is(:hover,:focus-visible) .tbx-1190__idx{transform:translateY(-3px)}.tbx-1190 a:is(:hover,:focus-visible) .tbx-1190__name{transform:translateX(6px)}.tbx-1190 a:is(:hover,:focus-visible)>span:last-child{opacity:1;transform:translate(0,0)}.tbx-1190 a:focus-visible{outline:2px solid #b95f40;outline-offset:2px}
@media (prefers-reduced-motion:reduce) {.tbx-1190,.tbx-1190 *,.tbx-1190::before,.tbx-1190::after,.tbx-1190 *::before,.tbx-1190 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。