CSS

固定ヘッダー使用時にページ内リンクのための余白を空ける方法

position:fixed;を使用したスティッキーヘッダーを設置したとき、ヘッダー部分と内部リンクのジャンプ先の要素が重なってしまうことがあります。WordPressの管理画面にログインした状態でプレビューすると、ページに設置した固定ヘッダーと、管理画面が吐き出すアドミンバーが重なってしまう現象にでくわした方も多いのではないでしょうか。

今日はそんな、固定ヘッダー(スティッキー)とページ内リンクの要素が重ならないようにする方法を紹介いたします。

まずは通常の固定ヘッダーとページ内リンクの要素が重なっているサンプルをご覧下さい。

→サンプル1(固定ヘッダーとページ内リンクの要素が重なっている)

続いて、この記事で紹介する、固定ヘッダーとページ内リンクの重なりを解消したサンプルです。

サンプル2(固定ヘッダーとページ内リンクの要素が重なっていない)

いかがでしょうか、ヘッダーにあるタイトルをクリックしたときに、サンプル2ではちゃんと見出しが表示された状態でページ内で遷移するかと思います。

スポンサーリンク

具体的な解決方法を紹介します。

見出しの要素に、固定ヘッダーの高さの分だけ、padding-topを設定し、それを打ち消すように、margin-topを設定します。
具体的には

のように書きます。60pxというのは固定ヘッダーの高さだと思ってください。
単純にpadding-top:60px;を設定するだけでも重ならないようにできるのですが、それだと余計なパディングが発生するため、それを打ち消すように、ネガティブマージンを設定するという発想です。

ページ内リンクはJavaScriptを使ってアニメーションさせるという人もいらっしゃると思います。JSでやる場合はJSのコードでスクロール量を調整できますが、その方法ですと、違うページから遷移されたページ内リンクの位置ずれは解消できません。

トリッキーな方法ですが、このようにCSSで解決させるのが一番シンプルではないかと思います。お試しください。

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA