スキップリンク

ナビ ／ パターン集トップ

キーボード利用者がナビを飛ばして本文へ行ける入口

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<a class="skip-link" href="#main">本文へスキップ</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: var(--space-4);
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
  font-size: var(--text-sm);
  border-radius: 0;
}
.skip-link:focus {
  inset-inline-start: var(--space-4);
  outline: 2px solid var(--color-accent-text);
  outline-offset: 2px;
}

確認する#

• ページ先頭付近に1つだけ置いている
• フォーカス時に視認できる
• main に id と tabindex="-1" がある

関連#

• キーボードで使える
• 出発点のCSS
• ナビゲーション