サイト制作で縦長デザインを採用するとき、動線の確保を配慮しなければならない。スクロールすることで現在地を見失い、迷子になることが考えられる。いまどこにいて何を閲覧しているか分からなくなるというものだ。

そのような対策のひとつに、ヘッダーをウインドウ上部に固定配置して、いかなるスクロール位置にいてもメニューにアクセスできるようする、というものがある。このメニューをアンカーリンクにすることでユーザビリティに配慮したサイトを見たことがあるかもしれない。たとえば、ブログなど文章系コンテンツにしても目次を設けて対象セクションに遷移するものもある。

このように縦長サイトにおいて、追従ヘッダーとアンカーリンクは比較的セットで実装されることがあるわけだが、ヘッダーが固定されていることでアンカーリンクの遷移先が隠れてしまう問題に遭遇する。

このエントリーでは、アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSを紹介したい。

問題

解決

追従ヘッダーのメニューがアンカーリンクになっている。アンカーリンクは各種見出しがターゲットで、クリックするとページ内遷移する。

見出しに追従ヘッダーが重なることなく表示されればOKだ。

ここで注目すべきは、CSSのscroll-padding-topプロパティだ。scroll-padding-topプロパティは、スクロールポート上部にオフセット値を付与できる。スクロールポートとは、スクロールバーが発生している領域だと認識してもらえば差し支えない。

サンプルソースコードではscroll-padding-top: 60px;として、追従ヘッダーの高さをオフセットするようにしている。

まとめ

アンカーリンク遷移先に追従ヘッダーが重ならないようにするCSSの紹介だった。

元来、アンカーリンク遷移先の要素に上余白を与えて擬似的にオフセットを作っていたことを考えると違和感なく理解できるものだと思う。ただしIE,Edgeに関しては、部分的なサポートに留まっている。要件によっては、しっかりサポート状況を確認してもらいたい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。