Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1105" aria-label="サンプルメニュー"><a href="#about"><span>企業情報</span><b aria-hidden="true">↗</b></a><a href="#services"><span>事業内容</span><b aria-hidden="true">↗</b></a><a href="#news"><span>お知らせ</span><b aria-hidden="true">↗</b></a></nav>
CSS
.tbx-1105{width:min(286px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f3f7f8;border:1px solid #d5e0e2;padding:16px 8px;font-family:system-ui,sans-serif}
.tbx-1105 a{display:flex;align-items:center;justify-content:center;gap:4px;position:relative;font-size:11px;font-weight:700;letter-spacing:-.06em;color:#3c6270;text-decoration:none;white-space:nowrap;padding:12px 4px;transition:color .35s}
.tbx-1105 a:not(:last-child){border-right:1px solid #d3e0e3}.tbx-1105 a:before{content:"";position:absolute;top:0;left:12%;width:76%;height:2px;background:#3c8b94;transform:scaleX(0);transform-origin:center;transition:transform .35s}
.tbx-1105 a b{font-size:15px;font-weight:400;opacity:0;transform:translate(-5px,5px);transition:opacity .3s,transform .3s}
.tbx-1105 a:is(:hover,:focus-visible){color:#176c78}.tbx-1105 a:is(:hover,:focus-visible):before{transform:scaleX(1)}.tbx-1105 a:is(:hover,:focus-visible) b{opacity:1;transform:translate(0,0)}
.tbx-1105 a:focus-visible{outline:2px solid #74b0b9;outline-offset:2px}@media(prefers-reduced-motion:reduce){.tbx-1105 *,.tbx-1105 a:before{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 に対応。