Live Demo
TabキーでリンクにフォーカスしてからEnterキーで本文へ移動できます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1062"><a class="tbx-1062__skip" href="#tbx-1062-main">本文へスキップ <span aria-hidden="true">↘</span></a>
<div class="tbx-1062__nav"><span>LOGO</span><small>MENU ABOUT</small></div>
<main id="tbx-1062-main" tabindex="-1"><b>メインコンテンツ</b><p>Tabキーでスキップリンクへ移動し、Enterキーで本文に進めます。</p></main>
</div>
CSS
.tbx-1062{width:min(304px,100%);font:11px/1.5 system-ui,sans-serif;color:#304d60;border-radius:10px;position:relative;padding-top:44px}
.tbx-1062__skip{position:absolute;top:6px;left:11px;display:flex;gap:12px;align-items:center;background:#214e66;color:#fff;text-decoration:none;padding:9px 13px;border-radius:6px;opacity:.2;transform:translateY(-7px);transition:opacity .2s,transform .2s;font-weight:750;font-size:10px}
.tbx-1062__skip span{font-size:15px}.tbx-1062__skip:is(:hover,:focus-visible){opacity:1;transform:translateY(0)}.tbx-1062__skip:focus-visible{outline:3px solid #eda95c;outline-offset:2px}
.tbx-1062__nav{background:#edf1f4;border:1px solid #d8e1e8;border-radius:7px 7px 0 0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px}.tbx-1062__nav>span{font-size:12px;letter-spacing:.08em;font-weight:900;color:#456877}.tbx-1062__nav small{font-size:8px;letter-spacing:.04em}
.tbx-1062 main{background:white;border:1px solid #d8e1e8;border-top:0;padding:15px 14px;border-radius:0 0 7px 7px;scroll-margin-top:10px}.tbx-1062 main b{font-size:11px}.tbx-1062 main p{font-size:10px;line-height:1.65;margin:7px 0 0;color:#748795}.tbx-1062 main:focus{outline:2px dashed #4c9199;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.tbx-1062__skip{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Accessibility / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。