パーツ番号 08-10-03 ・ CSSのみ

フォーカス時のみ現れるスキップリンク

マウス操作時は非表示で、キーボードでフォーカスした瞬間だけ画面内にスライドインします。WordPressサイトのアクセシビリティ対応（本文へスキップ）に直結します。

scrollcss

プレビュー

ソースコード

HTML

<div class="d08-10-03-demo">
          <a class="d08-10-03-skip" href="#d08-10-03-target-08-10-03">本文へスキップ</a>
          <div class="d08-10-03-page">
            <div class="d08-10-03-topbar">サイトヘッダー（ナビ省略）</div>
            <p class="d08-10-03-hint">Tabキーで最初にフォーカスすると、左上に「本文へスキップ」リンクが現れます。</p>
            <div id="d08-10-03-target-08-10-03" class="d08-10-03-target" tabindex="-1">▼ 本文コンテンツ</div>
          </div>
        </div>

CSS

.d08-10-03-demo{position:relative;width:100%}
        .d08-10-03-skip{position:absolute;top:-50px;left:8px;background:#111827;color:#fff;padding:9px 16px;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;transition:top .25s ease;z-index:5}
        .d08-10-03-skip:focus-visible{top:8px;outline:2px solid #a44bff;outline-offset:2px}
        .d08-10-03-page{padding-top:6px}
        .d08-10-03-topbar{background:#eef0f3;border-radius:8px;padding:8px 12px;font-size:11.5px;color:#6b7280;font-weight:600}
        .d08-10-03-hint{font-size:11.5px;color:#8a8f9c;margin:12px 0}
        .d08-10-03-target{background:#f1efff;border:1.5px dashed #6a5cff;border-radius:10px;padding:16px;font-size:13px;font-weight:700;color:#4b3fbf;text-align:center;outline:none}
        .d08-10-03-target:focus-visible{box-shadow:0 0 0 3px rgba(106,92,255,.3)}

クラス名 .d08-10-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。