[Web]CSSだけでスライドするスキップリンクを作ってみました
カテゴリー：Web
2022.04.08公開
2022.07.02更新
ページ先頭にあるスキップリンクが表示される時にページ全体を押し下げてスライドダウンするアニメーションを、リンクボタンの追加だけ、そしてスクリプトなしのCSSだけで作ってみました。
初めにスキップリンクとは
WebページをTabキー操作でブラウズする場合に、ページを開くたびにコンテンツに辿り着く前にトップページへのリンクやナビゲーションのリンクを通らなければなりません。そこでこのヘッダーの部分を飛ばしてメインコンテンツへジャンプするために用意されたリンクをスキップリンクというそうです。普段は必要ないので隠されていますが、キーボード操作などでリンクがフォーカスされた時に現れるようになっています。
スキップリンクのアイデアはコーディングWebアクセシビリティ(ヘイドン・ピカリング著)で勉強しました。キップリンク自体の必要不要の議論はあるようですが、実際に使われているところ(例：https://www.gov.uk/)もあるので、ここではそれはおいておきます。
コーディング
さて、本題に入ります。今回目指したのは。スキップリンクがフォーカスされた時に、ボタンによってページ全体が下に押し下げられてスライドするアニメーションです。ポイントは他の要素のタグやスタイルに影響を与えないことと、スクリプトを使わないことです。
<body>
<a class="skip" href="#main">
<div>
<header>
<h1>タイトル</h1>
<nav><ul><li><a href="#">リンク</a></li><li><a href="#">リンク</a></li><li><a href="#">リンク</a></li></ul></nav>
</header>
<main id="main">
<h2>メインコンテンツ</h2>
</main>
</div>
</body>スキップリンクのスタイルを「skip」クラスに割り当てました。
.skip {
border-width: 0;
display: block;
height: 1px;
line-height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
transition: all 0.3s ease;
width: 100%;
}
.skip:focus {
height: 44px;
line-height: 44px;
opacity: 1;
position: static;
text-decoration: underline;
}補足：Safari対策が必要でした
作成当初はリンクボタンの幅を100%のままで高さを0pxにして、ただスライドするだけだったのですが、検証したところSafariで認識してくれませんでした。面積がないと無理なのようなので仕方なく幅を1pxにして残しています。
デモ
まとめ
スクリプトなして他の要素に何も変更を加えることなく設置することができました。スタイルは多少違いますが。記事公開時点ではこのサイトも同じような動きになっています。Tabキーで操作してみてください。Macでしか検証していなくて申し訳ないですが、Google Chromeだったら追加設定なしで体験できると思います。
適用できないサイト
スクリプトなしで簡単に設置できますが、例外もあります。たとえば、ヘッダーが固定されているサイトではフォーカスされてもヘッダーの下(裏側)に潜り込んで隠れてしまうかもしれませんね。
追記
コードに不備があったので修正し、codepenのデモを追加しました。(2022/07/02更新)
この記事のカテゴリー：Web
Author
- digital smith - N.A.
- Old schoolなMacユーザー。DTPっぽいことや、WebコーディングやMacサポートとかでご飯を食べてきました。興味のあることはとりあえずやってみたいと思っている面倒くさい人。服が作りたくてIllustratorを使ったパターンメイキングを勉強しています。将来は有機農業をやってみたい。
